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

Question

代码：

<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>

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

Answer 1

<svg> 中的

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

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

Answer 2

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

Chrome 和 Firefox 正在试验实现 SVG 2 规范的建议部分。有些东西只能由 Firefox 实现，而另一些只能由 Chrome 实现。许多功能两者都实现，有些功能两者都不实现。

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

您可以在不支持此 SVG 2 功能的浏览器中获得相同的结果，方法是将 <svg> 元素替换为 <g> 元素或创建 <svg> 子元素在 <g> 元素上并将转换放在 <g> 元素上。

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

SVG translate seems to behave different in Chrome/Chromium

svg

google-chrome

transform

chromium