svg微信公众号推文实现点击显示答案

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;">答&nbsp;案</span></span></strong> &nbsp; &nbsp; &nbsp;<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>