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-width: 1px;border-style: solid;border-color: rgb(238, 238, 238);">
<section class="" style="border-width: 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="" 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="" style="fill: #fefefe;box-sizing: border-box;">
<animate attributename="opacity" begin="click" dur="6s" style="box-sizing: border-box;" from="" to="" fill="freeze"></animate>
</rect>
</svg>
</center>