SVG css旋转坚持而不是围绕中心旋转

Posted

技术标签:

【中文标题】SVG css旋转坚持而不是围绕中心旋转【英文标题】:SVG css rotation sticking and not rotating about the center 【发布时间】:2014-01-24 03:32:52 【问题描述】:

当悬停 SVG 时,我希望它旋转“容器”而不旋转其内容。我尝试通过反向旋转其内容来对抗 SVG 的旋转,但遇到了 2 个问题:

    它们没有围绕中心旋转 未悬停时它们不会恢复正常状态

代码

<svg x="0px" y="0px" viewBox="0 0 50 50">
    <path fill="none" d="M3.413,38.529c5.209,0.385,9.601-0.822,13.745-3.913c-4.223-0.565-7.115-2.503-8.675-6.429
                            c1.299-0.079,2.432-0.152,3.565-0.221c-4.248-1.805-6.697-4.756-7.021-9.438c1.334,0.364,2.572,0.701,3.81,1.04
                            C4.879,15.036,4.053,11.071,6.413,6.89c2.508,2.842,5.321,5.241,8.694,6.936c3.343,1.679,6.848,2.698,10.673,2.869
                            c0.068-1.372-0.044-2.736,0.23-4.018c1.527-7.146,9.775-10.025,15.383-5.375c0.745,0.617,1.363,0.77,2.219,0.433
                            c1.438-0.567,2.896-1.09,4.476-1.681c-0.582,1.976-1.881,3.367-3.404,4.605c0.053,0.102,0.105,0.205,0.157,0.307
                            c1.424-0.38,2.848-0.761,4.271-1.142c0.071,0.063,0.146,0.125,0.218,0.188c-1.164,1.208-2.237,2.528-3.527,3.583
                            c-0.84,0.686-0.98,1.387-0.984,2.344c-0.035,11.2-7.32,21.553-17.745,25.263C19.443,43.916,9.997,42.932,3.413,38.529z"></path>
</svg>

见Live example

注意:目前仅适用于-webkit- 浏览器

【问题讨论】:

【参考方案1】:

它特定于 SVG CSS 转换。你可以阅读它here。

您需要定义transform-origin 属性。

修复您的情况:http://jsfiddle.net/Db2s2/3/

【讨论】:

两个答案都成功了,但你先到了那里,还帮助我解决了另一个我不知道的“transform-origin”问题!【参考方案2】:

如果您不希望某些东西旋转,那么只需将其放在不旋转的容器中即可。

即在顶部粘贴另一个 SVG 作为容器并旋转它。

<svg id="foreground" x="0px" y="0px" viewBox="0 0 50 50">
    <rect   fill="none" pointer-events="all">
</svg>

like so

【讨论】:

以上是关于SVG css旋转坚持而不是围绕中心旋转的主要内容,如果未能解决你的问题,请参考以下文章

围绕其中心旋转可缩放和翻译的 SVG 元素

css旋转180度怎么转

css3 实现360度无线旋转

操纵 svg 圆原点以创建围绕中心的旋转动画

不使用 CSS3 围绕左下边缘枢轴旋转图像

围绕世界 0,0,0 而不是对象中心旋转