如何实现SVG点击后360°旋转（类似chrome://settings效果）

我想要实现SVG点击后360°旋转的效果，和chrome://settings里的旋转效果类似，目前的代码如下，恳请帮忙调整实现需求，谢谢。

现有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>

现有JS代码 #

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

修正方案 #

1. 修复HTML事件绑定错误 #

原代码中的on-click不是标准HTML事件属性，需改为onclick：

<svg id="product-logo" onclick="onProductLogoClick_" width="27" height="27" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

2. 调整JS动画参数（贴近Chrome效果） #

Chrome设置页的旋转是流畅的单圈360°，原代码的rotate(-10turn)会转10圈，不符合需求。同时添加fill: "forwards"保证动画结束后元素停在最终状态，优化缓动曲线匹配Chrome风格：

function onProductLogoClick_() {
    const logo = document.getElementById("product-logo");
    // 清除未完成的动画，避免重复点击冲突
    logo.finish();
    logo.animate({
        transform: ["rotate(0deg)", "rotate(360deg)"]
    }, {
        duration: 500,
        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
        fill: "forwards"
    });
}

3. 可选：CSS动画实现（更简洁易维护） #

如果偏好CSS方案，可定义动画类，通过添加/移除类触发旋转：

CSS代码

@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.logo-rotate {
    animation: rotate360 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

对应JS代码

function onProductLogoClick_() {
    const logo = document.getElementById("product-logo");
    // 移除类后强制重绘，确保重复点击能重新触发动画
    logo.classList.remove("logo-rotate");
    void logo.offsetWidth;
    logo.classList.add("logo-rotate");
}

内容的提问来源于stack exchange，提问作者niksavc