在SVG组上设置transform-origin不能在FireFox中工作 [英] Setting transform-origin on SVG group not working in FireFox
问题描述
我有一个问题，让transform-origin工作在Firefox（v.18 +，其他版本没有测试）。 Webkit浏览器按预期工作。
I am having an issue with getting transform-origin to work in Firefox (v.18+, other versions not tested). Webkit browsers work as expected.
我试图将原点设置为组的中心，但我尝试过的没有工作到目前为止。
I'm trying to set the origin to the center of the group, but nothing I've tried has worked so far.
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
#test{
-webkit-transform-origin: 50% 50%;
transform-origin: center center;
-webkit-animation: prop 2s infinite;
animation: prop 2s infinite;
}
@-webkit-keyframes prop {
0% { -webkit-transform: scale(1,1);}
20% { -webkit-transform: scale(1,.8);}
40% { -webkit-transform: scale(1,.6);}
50% { -webkit-transform: scale(1,.4);}
60% { -webkit-transform: scale(1,.2);}
70% { -webkit-transform: scale(1,.4);}
80% { -webkit-transform: scale(1,.6);}
90% { -webkit-transform: scale(1,.8);}
100% { -webkit-transform: scale(1,1);}
}
@keyframes prop {
0% { transform: matrix(1, 0, 0, 1, 0, 0);}
20% { transform: matrix(1, 0, 0, .8, 0, 0);}
40% { transform: matrix(1, 0, 0, .6, 0, 0);}
50% { transform: matrix(1, 0, 0, .4, 0, 0);}
60% { transform: matrix(1, 0, 0, .2, 0, 0);}
70% { transform: matrix(1, 0, 0, .4, 0, 0);}
80% { transform: matrix(1, 0, 0, .6, 0, 0);}
90% { transform: matrix(1, 0, 0, .8, 0, 0);}
100% { transform: matrix(1, 0, 0, 1, 0, 0);}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
<g id="test">
<rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
</g>
</svg>
</body>
</html>
感谢您的帮助！
推荐答案
我试图使用CSS转换围绕其中心点旋转一个简单的cog svg图形。我有与Firefox一样的问题;变换起源似乎没有效果。
I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect.
解决方法是绘制原始的svg形状，使其中心在坐标0,0：
The solution was to draw the original svg shape so that its centre was at coordinate 0, 0:
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>
然后在其周围添加一个组，并翻译到您想要的位置：
Then add a group around it and translate to the position you want:
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<g transform="translate(150, 100)">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</g>
</svg>
现在，您可以应用应该在Firefox中使用的css转换（我向HTML标记添加一个类基于用户操作的JavaScript（ js-rotateObject ），并使用Minimizr检查浏览器是否可以处理转换和转换（ .csstransforms.csstransitions ）：
Now you can apply css transitions that should work in Firefox (I add a class to the HTML tag using JavaScript based on a user action (js-rotateObject) and use Minimizr to check that the browser can handle transforms and transitions (.csstransforms.csstransitions):
#myObject{
transform: rotate(0deg);
transition: all 1s linear;
}
.csstransforms.csstransitions.js-rotateObject #myObject{
transform: rotate(360deg);
}
希望有帮助。
这篇关于在SVG组上设置transform-origin不能在FireFox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
