文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG css旋转卡住而不是围绕中心旋转

问SVG css旋转卡住而不是围绕中心旋转
EN

Stack Overflow用户

提问于 2014-01-06 16:46:52

回答 2查看 5.7K关注 0票数 1

当悬停SVG时，我希望它旋转“容器”，其内容不旋转。我试图通过反旋转其内容来对抗SVG的旋转，但遇到了两个问题：

他们不是在中心旋转
他们没有回到正常状态时，没有徘徊

密码

<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>

请参阅实例化

注意:目前只在-webkit-浏览器上工作。

html

css

svg

rotation

hover

Stack Overflow用户

回答已采纳

发布于 2014-01-06 17:07:18

SVG CSS转换的特殊性。你可以读到它，这里。

您需要定义transform-origin属性。

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

票数 4

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20954895

复制

相似问题

问SVG css旋转卡住而不是围绕中心旋转
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG css旋转卡住而不是围绕中心旋转EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG css旋转卡住而不是围绕中心旋转
EN