Chrome中的SVG：属性变换≠CSS变换答案

【问题标题】：SVG in Chrome: Attribute transform ≠ CSS transformChrome中的SVG：属性变换≠CSS变换
【发布时间】：2013-09-23 20:59:17
【问题描述】：

为了能够使用 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 样式的计划？

【问题讨论】：

如果我回答“是”，你会接受吗？似乎这是一个隐晦的抱怨，或者错误报告或其他东西。 “我正在做 X，但它没有给我想要的结果。这是否意味着我必须停止做 X 才能获得我想要的结果？” 是的。是的。
:-) 公平点。我是 web-dev 的新手，并且不太了解 SVG 规范，无法说出它是否是一个错误。我希望得到的答案是“你必须在 CSS 中使用 50unit”或“这是如何将过渡应用到 SVG 属性”。如果这确实是一个错误，并且没有简单的解决方法，那么答案就是“是”。

标签： css google-chrome svg transform

【解决方案1】：

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

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

【讨论】：