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

【问题标题】：How to set the rotation center of a nested SVG如何设置嵌套 SVG 的旋转中心
【发布时间】：2016-01-16 11:42:31
【问题描述】：

我想围绕不是 (0,0) 的中心旋转嵌套的 SVG 元素（折线）。旋转是动画的（过渡），因为我想用样式触发它，所以我编写了一个“标准”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.

这个样本有什么问题？

【问题讨论】：

标签： css svg css-transitions

【解决方案1】：

我想我找到了解决办法：

将 transform-origin 移动到 #svghookbutton（不在悬停状态）。
将#svghookbutton:hover 选择器更改为#svghook:hover #svghookbutton，因为当您的箭头旋转鼠标光标时，您的选择器会失去与箭头的接触并停止转换。我建议您将鼠标悬停在黑色圆圈上时开始转换的选择器。

Fiddle updated

【讨论】：

太棒了！我认为'transform'和'transform-origin'必须具有相同的风格。谢谢...您是否删除了无用的前缀样式？
是的，你只需要 webkit 和 ms（如果你支持 IE9）。
其实样式是js设置的，否则确实应该是黑圈触发的。谢谢。