在SVG组上设置转换原点在FireFox中不起作用
我在使转换原点在Firefox（v.18 +，未测试的其他版本）中工作时遇到问题。Webkit浏览器可以正常工作。
我正在尝试将原点设置为组的中心，但是到目前为止我没有尝试过。
这是代码：
<!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>
谢谢你的帮助！
素胚勾勒不出你3回答
-
慕妹3242003
我试图使用CSS过渡围绕其中心点旋转一个简单的齿轮svg图形。我和Firefox有同样的问题；转换原点似乎没有任何效果。解决方案是绘制原始svg形状，使其中心位于坐标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>然后在其周围添加一个组并转换为所需的位置：<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转换（我根据用户操作（js-rotateObject）使用JavaScript将类添加到HTML标记，并使用Minimizr检查浏览器是否可以处理转换和转换（.csstransforms.csstransitions）：#myObject{ transform: rotate(0deg); transition: all 1s linear;}.csstransforms.csstransitions.js-rotateObject #myObject{ transform: rotate(360deg);}希望能有所帮助。
随时随地看视频慕课网APP
Html/CSS
CSS3