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中具有良好的良好支持。

主要的缺点似乎是，如果未完成动画，则从动画处撤消动画并不简单。