Html 在标记中设置SVG元素的动画

我正在尝试使用：在CSS中悬停以获得要旋转的圆的一部分

我尝试使用的CSS将导致切片像我预期的那样旋转。但是，当我添加：hover选择器时，它不会旋转

我的HTML和CSS如下：

变换原点：190px 50px； 变换：旋转360度； 转换：转换10秒； } 框：悬停{ 填充不透明度：0%； 笔画：黑色； } 圆圈：悬停{ 变换原点：10%10%； 变换：旋转90度； 转变：转变2s； 笔画：黑色； }

---

你的CSS代码很好。你可以做方块。切片：悬停

---

但是，您应该看看您的SVG：在您希望这个片段移动到什么程度之前，还有其他问题吗？像这样的？是的，这就是我希望它移动的方式，但是，我希望它通过悬停在.slice上而不是框上来移动。所以，使用box:hover.slice{}确实可以选择我想要移动的对象，但是只有当我将鼠标悬停在框上时。。。我想要像盒子一样的东西。切片：悬停，如果有意义的话？

<svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
    <circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
    <g class="slice">
        <path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
    </g>
</svg>

#box circle {
    pointer-events: none;
}