如何让SVG在点击时旋转360°，就像Chrome：//设置一样？

xzv2uavs 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(92)

如何使用SVG实现这一点？如果你能帮忙的话，我将非常感激，谢谢。
HTML

<svg id="product-logo" on-click="onProductLogoClick_" width="27" height="27" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="#fff"><path d="M5.225 10.265A6.996 6.996 0 0 1 12 5h9.733a11.976 11.976 0 0 0-19.512.061l3.004 5.204zM22.898 7h-6.003a6.979 6.979 0 0 1 1.162 8.498l.008.004-4.872 8.438A11.98 11.98 0 0 0 22.898 7zm-9.009 11.735A6.964 6.964 0 0 1 5.944 15.5l-.004.002-4.87-8.435a11.98 11.98 0 0 0 9.812 16.877l3.007-5.21z"></path><path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath></defs></svg>

onProductLogoClick_() {
        this.$["product-logo"].animate({
            transform: ["none", "rotate(-10turn)"]
        }, {
            duration: 500,
            easing: "cubic-bezier(1, 0, 0, 1)"
        })
    }

google-chrome

来源：https://stackoverflow.com/questions/76891749/how-to-make-svg-rotate-360-on-click-like-on-chrome-settings

1条答案

按热度按时间

vnjpjtjt1#

它只能在SVG中完成，并使用SMIL动画
更多精彩互动请参见：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>

赞(0）回复(0）举报 2023-09-28

我来回答

如何让SVG在点击时旋转360°，就像Chrome：//设置一样？

1条答案

相关问题

热门标签

最新问答