SVG 翻译似乎在 Chrome/Chromium 中表现不同答案

【问题标题】：SVG translate seems to behave different in Chrome/ChromiumSVG 翻译似乎在 Chrome/Chromium 中表现不同
【发布时间】：2015-10-10 01:19:20
【问题描述】：

https://jsfiddle.net/Lpfa9umq/

代码：

<svg>
    <symbol>
        <circle id="circle1" cx="50" cy="50" r="20" stroke="black" stroke-width="1" />
        <circle id="circle2" cx="25" cy="25" r="10" stroke="red" fill="red" stroke-width="1" />
    </symbol>
</svg>
<svg width="100" height="100">
    <use xlink:href="#circle1" />
    <svg width="50" height="50" transform="translate(20, 10)">
        <use xlink:href="#circle2" />
    </svg>
</svg>

在 Firefox 中应用了 transform 属性，但在 Chrome/Chromium 中没有，为什么？我用错了吗？

【问题讨论】：

标签： google-chrome svg transform chromium

【解决方案1】：

在 SVG 1.1 中，<svg> 元素不接受变换属性。在 SVG 2 中是proposed that they should。

Chrome 和 Firefox 正在尝试实施 SVG 2 规范的提议部分。有些东西只由 Firefox 实现，而另一些只由 Chrome 实现。许多功能由双方实现，部分功能由双方实现。

在这种特殊情况下，Firefox 实现了 SVG 2 功能，但 Chrome 没有。

在不支持此 SVG 2 功能的浏览器中，您可以通过将 <svg> 元素替换为 <g> 元素或在 <g> 元素上创建 <svg> 子元素并将<g> 元素上的变换。

【讨论】：

mmh，svg 元素的变换发生在其父元素的坐标空间中，而包含的 g 元素中的变换将发生在 svg 元素本身的坐标空间中。当您在内部 svg 元素上使用 viewBox 时，这变得可见。因此，您应该将保存转换的 g 元素放在 svg 元素周围。
viewBox 仅适用于儿童。 viewBox 和 transform 一起使这一点更加明显。
鉴于我之前的评论，这正是我所期望的。那里没有 FF 错误。
对，但你的最后一句话说，将转换放在 svg 元素内的 g 元素上时，你会获得相同的结果。但是要在 transform 属性中为完全相同的值实现相同的结果，您应该将 g 元素放在 svg 元素周围...
是的，这样会让人们更容易理解。已更新。

【解决方案2】：

<svg> 中的<svg> 会混淆浏览器。而是使用<g> 标签。

<g transform="translate(20, 10)">
    <use xlink:href="#circle2" />
</g>

【讨论】：

<use xlink:href="#circle2" transform="translate(20, 10)" /> 有效，但不推荐使用，因为您可能希望将 circle2 与同一转换下的其他对象分组。
感谢您的回答，它有效。但是为什么 svg 里面的 svg “令人困惑”？
可能是 Chrome 错误，但您是否尝试过添加一些 SVG 标签（例如：viewBox 和 preserveAspectRatio、x 和 y 用于内联 SVG）。第一次看到这个错误，我不经常使用symbol，因为use 在某些 Safari 版本上失败。