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="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>