如何设置嵌套SVG的旋转中心

Question

我想围绕它不是 (0,0) 的中心旋转一个嵌套的 SVG 元素（折线）。旋转是动画的（过渡），因为我想用一种风格触发它，我写了一个 'standart' 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) 为缩放前的旋转中心。

折线终于旋转了，但是飞得很奇怪..you can see it in this fiddle if you hover the '>' in the black circle.

这个样本有什么问题？

Answer 1

我想我找到了解决办法：

将 transform-origin 移动到 #svghookbutton（不在悬停状态）。
将 #svghookbutton:hover 选择器更改为 #svghook:hover #svghookbutton，因为当您的箭头旋转时，使用您的选择器鼠标光标会与箭头失去联系并停止过渡。我推荐的选择器当你将鼠标悬停在黑色圆圈上时开始过渡。

Fiddle updated

如何设置嵌套SVG的旋转中心

How to set the rotation center of a nested SVG

css

svg

css-transitions