我在使转换原点在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
TA贡献1824条经验 获得超6个赞
我试图使用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);
}
希望能有所帮助。
- 3 回答
- 0 关注
- 723 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消