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>

转换属性适用于Firefox，但不适用于Chrome / Chromium，为什么？我使用它错了吗？

Answer 1

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

Chrome和Firefox正在尝试实施SVG 2规范的建议部分。有些内容仅由Firefox实现，其他内容仅由Chrome实现。大多数都没有实现，两者都实现了一些功能。 SVG 2规范本身尚未完成。

在这种特殊情况下，Firefox已实现SVG 2功能，但Chrome尚未实现。

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

Answer 2

<svg>中的{p> <svg>让浏览器感到困惑。而是使用<g>标记。

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

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

2 个答案: