为啥这个嵌套的 SVG 在 Firefox 中不起作用？

Posted 2023-03-28

【中文标题】为啥这个嵌套的 SVG 在 Firefox 中不起作用？

【英文标题】：Why does this nested SVG not work in Firefox?为什么这个嵌套的 SVG 在 Firefox 中不起作用？

【发布时间】：2022-01-19 18:14:51

【问题描述】：

我正在创建一个显示库中所有图标的联系表。我使用嵌套的 SVG 构建了它。这是一个最小版本：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 200 200">
    <svg id="sheet_core"   x="0" y="0">
        <svg   x="0" y="0">
            <symbol id="piece" viewBox="-2.5 -2.5 105 105">
                <circle r="50" cx="50" cy="50" data-playerfill="true" fill="#ffffff" stroke- stroke="#000000"></circle>
            </symbol>
            <use href="#piece" x="25" y="25" transform="matrix(0.75,0,0,0.75,6.25,6.25)"></use>
            <text x="0" y="192.1015625" svgjs:data="&quot;leading&quot;:&quot;1.3&quot;">piece</text>
        </svg>
    </svg>
</svg>

这在 Chrome 和 Opera 中运行良好，但在 Firefox 中不运行。

你应该看到这个：https://ibb.co/VT8SSSd。

但在 Firefox 中，我得到了这个：https://ibb.co/5L7PP22。

如果我检查代码，<symbol>s 是灰色的，表明它们没有被引用，而之后它们很明显是正确的。我还尝试将所有符号移动到全局<defs>，但这也不起作用。任何想法如何调整它以便它也可以在 Firefox 中工作？

我不得不说，这些 SVG 浏览器的差异令人抓狂。

【问题讨论】：

对我来说，sn-p 在 Chrome 和 Firefox 中看起来是一样的。我应该看到什么不同？

嵌套 SVG 往往存在未被发现的错误。

编辑添加了我看到和没有看到的图片。

您是否重复使用了 id 值，即您的 id 值是否以某种方式重复？

不，他们肯定不在这个最小的例子中。

【参考方案1】：

一旦我在我的网站上加载了 SVG，以便我可以在一些不同的环境中进行测试，它就突然开始工作了。我怀疑发生了一些奇怪的 CSPF，也许只是在我这边。但 SVG 似乎不是根本问题。

和你一样。