[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,显示下面的图的操作了。
最后发给运营,顺利通过微信的校验!
前端远比想象中的还要复杂,需要学习的还有很多,脚踏实地记录好遇到的麻烦与经验,三省吾身,才能慢慢积累经验。