我在使转换原点在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>
谢谢你的帮助！
慕妹3242003