css - Chrome中的SVG：属性变换≠CSS变换

Question

为了能够使用 CSS 过渡（在 Chrome、FF 中），我已经开始将一些 SVG 属性样式转换为 CSS 样式。但是，我在 Chrome 中遇到了一个问题：如果窗口缩放不是 100%，则翻译的行为似乎有所不同。

<svg style="position:absolute">
    <rect width="20" height="20" fill="blue"
    transform="translate(50,50)"></rect>
</svg>
<svg style="position:absolute">
    <rect width="20" height="20" fill="red"
    style="-webkit-transform:translate(50px,50px)"></rect>
</svg>

http://jsfiddle.net/mP493/

红色三角形应该在蓝色三角形上，但不是在我放大时。我是否必须放弃将 SVG 属性样式转换为 CSS 样式的计划？

Answer 1

看起来我要使用 SMIL 动画。这些允许 SVG 表示属性的转换，并且现在在 FF 和 Chrome 中有很好的支持。

主要缺点似乎是，如果动画未完成，从它所在的位置反向撤消动画并不简单。