[SVG] 关于运营偶尔要我给他们的公众号加些代码特效这件事2

这次要做的是点击气泡出现对话的SVG

 

 

 

 实现方法也一目了然，就是下面垫张解锁后的图，点击上面的未解锁的图再隐藏掉就行了

SVG的隐藏：

<svg
    width="375"
    xmlns="http://www.w3.org/2000/svg"
    opacity="1"
    style="background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;background-color: rgb(254, 254, 254);width: 375px;height: 148.5px;background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/iaMpo6zxibPwuRXnA2VMWAn4NyN4ibphaIou4PqD48QoO4pJUHwxH6WcypjTxFjtJoUGKWic85Z7crwxgrLeRM8ykQ/0?wx_fmt=jpeg');"
  >
    <animate fill="freeze" attributeName="opacity" begin="click" from="1" to="0" dur="0.2" restart="never"></animate>
</svg>

通过点击把SVG透明度降为0

外面再嵌套一个背景图是解锁后的div就行了

然后当我信心满满给到运营后，问题就来了，微信公众号后台保存后无法显示SVG

又是老问题，于是我逐个排查，最后发现是微信公众号文章无法使用背景图，当然，也可能是我姿势不对。

但是如果用img的话，微信公众号文章无法使用position和transform，所以无法把未解锁的放在解锁后的图上面

最后发现SVG的image标签，可以叠起图片，而且image标签里面也可以加animate标签，来实现点击image后改变样式

最后的代码：

<svg
  width="375"
  xmlns="http://www.w3.org/2000/svg"
  opacity="1"
  style="width: 375px;height: 503px;display:block;margin: auto;"
>
  <image href="https://mmbiz.qpic.cn/mmbiz_jpg/iaMpo6zxibPwuRXnA2VMWAn4NyN4ibphaIoiafzetXibySPrKW3x4TqXwj6Xb94eWWAkbkJLuaFlOy8JSydoesXaUwg/0?wx_fmt=jpeg" style="width: 375px;height: 503px;display: block;font-size: 0;margin: auto;" />
  <image href="https://mmbiz.qpic.cn/mmbiz_jpg/iaMpo6zxibPwuRXnA2VMWAn4NyN4ibphaIo9y0ySibSqeAJzkMVhX6XJZsEfmlJOibAR7yykXkX9PvUnVL2BswaAkaA/0?wx_fmt=jpeg" style="width: 375px;height: 503px;display: block;font-size: 0;margin: auto;">
    <animate fill="freeze" attributeName="opacity" begin="click" from="1" to="0" dur="0.2" restart="never"></animate>
  </image>
</svg>

这样就成功实现了点击上面的图，再降低透明度为0，显示下面的图的操作了。

最后发给运营，顺利通过微信的校验！