如何让 SVG 在单击时旋转 360°,就像在 chrome://settings 上一样?

问题描述 投票:0回答:1
javascript google-chrome svg onclick rotation
1个回答
0
投票

只能用SMIL动画在SVG中完成

更多精彩互动请参见:https://codepen.io/mikemjharris/post/svg-toggling

<svg width="160" viewBox="0 0 240 240">
    <g fill="black">
        <path
            d="m52 103a70 70 90 0168-53h97a120 120 90 00-195 1l30 52zm177-33h-60a70 70 90 0112 85l0 0-49 84a120 120 90 0097-169zm-90 117a70 70 90 01-80-32l0 0-49-84a120 120 90 0098 169l30-52z" />
        <circle cx="120" cy="120" r="50" />
        <animateTransform attributeType="xml" attributeName="transform" 
            type="rotate" from="0 120 120" to="360 120 120"
            begin="click" dur="9s" repeatCount="indefinite" />
    </g>
</svg>

© www.soinside.com 2019 - 2024. All rights reserved.