我想旋转一个嵌套的SVG元素(折线)围绕它的中心，这不是(0,0)。旋转是动画的(过渡)，因为我想用样式触发它，我写了一个"标准"CSS过渡(我的意思是它不是SVG动画，我想它会是一样的?)。
还有一件事:SVG是根据容器和它的viewBox属性来调整大小的，你可以看到:
<div id="container">
<svg version="1.1" id="svghook" xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 2 20">
<line x1="0" y1="0" x2="0" y2="20"></line>
<circle cx="0" cy="10" r="1" stroke-width="0px"></circle>
<polyline id="svghookbutton" points="0.4,9.6 -0.5,10 0.4,10.4 "></polyline>
</svg>
</div>
现在我想旋转折线，并尝试:
transform: rotate(180deg);
transform-origin: 0px 10px;
(0,10)为缩放前的旋转中心。
最后折线被旋转，但它使一个非常奇怪的飞行…如果你将'>'悬停在黑色圆圈中，你可以看到它。
我想我找到解决办法了:
- 移动transform-origin到#svghookbutton(不在悬停状态)。
- 将
#svghookbutton:hover选择器更改为#svghook:hover #svghookbutton，因为当您的箭头旋转鼠标光标与箭头失去联系时，您的选择器会停止转换。选择器我建议你在鼠标悬停在黑色圆圈上时开始转换。
小提琴更新