{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一纸荒年 Trace。 的问题《SVG transform origin and box with small viewBox an》','https://www.manongdao.com/q-924004.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Definition
In Firefox in order to have real transform-origin: center we have to add transform-box: fill-box. It works very well in casual situations, but there are some problems.
When we have small svg's viewBox (eg. <svg viewBox="0 0 10 10">) and we have to use floated numbers in order to provide exact center position in svg space there is some strange behaviour — fill-box is ignored.
Example
https://jsfiddle.net/6jckL4ne/
@keyframes animRotate {
from {
transform: rotate(360deg);
}
}
svg {
background-color: pink;
}
.spin {
animation: animRotate 3s infinite;
transform-origin: center;
transform-box: fill-box;
fill: green;
}<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 1 1">
<rect class="spin" height=".5" width=".5" x="0.25" y="0.25"/>
<line x1="0.5" x2="0.5" y1="0" y2="1" stroke="black" stroke-width="0.01"></line>
<line x1="0" x2="1" y1="0.5" y2="0.5" stroke="black" stroke-width="0.01"></line>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 100 100">
<rect class="spin" height="50" width="50" x="25" y="25"/>
<line x1="50" x2="50" y1="0" y2="100" stroke="black" stroke-width="1"></line>
<line x1="0" x2="100" y1="50" y2="50" stroke="black" stroke-width="1"></line>
</svg>
</body>Expected result
Both rectangles (left and right) should be rotating in the center of each svg (the point of the intersection of two black lines).