svg微信公众号推文实现点击显示答案
大家都知道微信公众号推文不能写js 所以不能加点击事件 其实是对的 确实不能写js
但是点击事件可以用svg写 svg代码可不会被微信隐蔽
为了能更好的理解 我写个简单的例子 点击变色
SMIL方式
<svg> <rect x="15" y="15" width="40" height="40" fill="red"> <set attributeName="fill" to="blue" begin="click"/> </rect> </svg>
点击显示答案原理就是 答案文字上面有个svg矩形在上面 点击透明度变成0 自然就显示出文字了
<section style="height: 180px;overflow-x: hidden;overflow-y: auto;text-align: center;box-sizing: border-box;padding: 10px;border- 1px;border-style: solid;border-color: rgb(238, 238, 238);"> <section class="" style="border- 0px;border-style: none;border-color: initial;box-sizing: border-box;"> <p style="margin-bottom: 10px;white-space: normal;"> <br/> </p> <p style="text-align:center;margin-bottom: 10px;white-space: normal;" align="center"> <strong style="font-size: 14px;caret-color: red;"><span style="font-size: 18px;"><span style="line-height: 22.4px;">答 案</span></span></strong> <br/> </p> </section> </section> <center class="" style="box-sizing: border-box;text-align: center;"> <svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg" style="margin-top: -180px;box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"> <rect width="100%" height="200" style="fill: #fefefe;box-sizing: border-box;"> <animate attributename="opacity" begin="click" dur="6s" style="box-sizing: border-box;" from="1" to="0" fill="freeze"></animate> </rect> </svg> </center>