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

我想旋转一个嵌套的SVG元素（多段线）围绕它的中心而不是（0,0）。旋转是动画（过渡），因为我想用一种风格触发它，所以我写了一个'standart'CSS转换（我的意思是它不是SVG动画，我想它会是同样的东西？）。如何设置嵌套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。

这个样本有什么问题？

来源

2015-10-17 jeum

我想我找到了解决办法：

移动变换原点#svghookbutton（不是在悬停状态）。
更改#svghookbutton:hover选择器到#svghook:hover #svghookbutton，因为使用您的选择器时，当您的箭头正在旋转时，鼠标光标松开与箭头的接触并停止您的转换。当你将鼠标悬停在黑色圆圈上时，我建议你选择开始转换。

Fiddle updated

来源

2015-10-17 22:27:24 makshh

太好了！我认为“变形”和“变形起源”必须采用相同的风格。谢谢...你删除了无用的前缀样式吗？ – jeum

是的，您只需要webkit和ms（如果您支持IE9）。 – makshh

其实风格是由js设置的，否则它应该由黑色圆圈触发。谢谢。 – jeum

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

回答

相关问题