|
|

楼主 |
发表于 2022-10-23 11:53
|
显示全部楼层
本帖最后由 马黑黑 于 2022-10-23 11:55 编辑
由于svg下文本按钮的旋转基点会因浏览器环境变化而受到影响,对移动设备的兼容性不友好,我已将原帖的文本按钮换成了渐变圆形按钮。原先的这部分代码:
<text x="10" y="35" font-size="40" dominant-baseline="middle" stroke="tan" fill="purple" id="btnplay" style="cursor: pointer;">☀
<animateTransform attributeName="transform" dur="4s" type="rotate" from="0 26.86 30" to="360 26.86 30" repeatCount="indefinite" />
</text>
改为:
<circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
<animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
</circle>
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="50%" id="bgcolor">
<stop offset="0%" style="stop-color: pink; stop-opacity:0.8" />
<stop offset="100%" style="stop-color: green; stop-opacity:0.75" />
</linearGradient>
</defs>
|
|