SVG css旋转粘附而不是围绕中心旋转 [英] SVG css rotation sticking and not rotating about the center
本文介绍了SVG css旋转粘附而不是围绕中心旋转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
悬停SVG时,我希望它旋转容器,其内容不旋转。我试图通过反转它的内容来反抗SVG的旋转,但碰到两个问题:
- 它们不是围绕中心旋转 li>
- 没有徘徊时,他们没有回到正常状态
代码
< svg x =0pxy =0pxviewBox =0 0 50 50>
<路径填充=无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.263C 19.443,43.916,9.997,42.932 ,3.413,38.529z>< /路径>
< / svg>
参见现场示例
注意:目前仅适用于 -webkit -
浏览器 p>
解决方案
其具体的SVG CSS Transformation。您可以阅读此处
$ b
您需要定义 transform-origin
属性。
修复您的情况: http://jsfiddle.net/Db2s2/3/
p>When hovering an SVG, I want it to rotate the "container" with its contents not rotating. I tried countering the rotation of the SVG by counter rotating its contents but hit 2 issues:
- They're not rotating about the center
- They're not returning back to normal state when not hovered
The code
<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>
see Live example
Note: only works on -webkit-
browsers at the moment
解决方案
Its specific of SVG CSS Transformation. You can read about it here.
You need define transform-origin
property.
Fix for your case: http://jsfiddle.net/Db2s2/3/
这篇关于SVG css旋转粘附而不是围绕中心旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文