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

问题描述：

代码:

<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，为什么?我用错了吗?

The transform attribute is applied in Firefox, but not in Chrome/Chromium, why? Am I using it wrong?

答

在中会混淆浏览器.而是使用标签.

<svg> within <svg> is confusing the browser. Instead use <g> tag.

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

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

相关推荐