在 SVG 组上设置转换原点在 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.
代码如下:
#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);
}
}
<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>
推荐答案
我试图使用 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 转换(我使用基于用户操作的 JavaScript(js-rotateObject
)向 HTML 标签添加一个类,并使用 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 组上设置转换原点在 Firefox 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!