SVG使用外部源在firefox上不起作用答案

【问题标题】：SVG use external source not working on firefoxSVG使用外部源在firefox上不起作用
【发布时间】：2020-03-11 21:41:02
【问题描述】：

我正在尝试制作一个 SVG 图标精灵，类似于这个小提琴

http://jsfiddle.net/8ke8nsft/6

唯一的区别是在我的应用程序上，我使用了一个相对 URL“../images/svg-sprite.svg#home-icon”，这在 chrome 和 safari 上效果很好，但在 firefox 上不显示。

<svg class="home-icon">
    <use xlink:href=../images/svg-sprite.svg#home-icon"/>
</svg>

当我在页面顶部添加 svg sprite inline 然后使用它时，Firefox 可以完美运行

<svg class="home-icon">
    <use xlink:href=#home-icon"/>
</svg>

这是我的 SVG 文件

<svg>
    <symbol id="home-icon" viewBox="0 0 512 512">
        <title>Home Icon</title>
        <path d="M512,296l-96-96V56h-64v80l-96-96L0,296v16h64v160h160v-96h64v96h160V312h64V296z"/>
    </symbol>
</svg>

我错过了什么吗？

【问题讨论】：

相对 URL 怎么样？还是在我的本地环境中？ “../images/svg-sprite.svg#home-icon”适用于 chrome 和 safari
我知道小提琴上的外部示例在任何地方都不起作用，但我无法演示小提琴上的相对网址
@RobertLongson 完美。这解释了我的问题。我在同一个父文件夹中添加了精灵，它在 Firefox 上运行。 Chrome 和 safari 并不介意 ../images。谢谢！

标签： html css svg

【解决方案1】：

为了更好地保护您的安全，Firefox 只允许文件在原始文件的同一目录或子目录中引用其他文件。

如果您通过网络服务器访问内容，则此限制不适用，但网络服务器可能会对文件位置施加其他限制。

【讨论】：

【解决方案2】：

我发现自己被这个问题困扰着。我刚刚意识到我在外部 svg 文件中缺少xmlns="http://www.w3.org/2000/svg"。所以尝试：

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="home-icon" viewBox="0 0 512 512">
        <title>Home Icon</title>
        <path d="M512,296l-96-96V56h-64v80l-96-96L0,296v16h64v160h160v-96h64v96h160V312h64V296z"/>
    </symbol>
</svg>

我想你会没事的

【讨论】：

【解决方案3】：

请确保您在网络服务器中运行 html。直接不行。

例子：

在网络服务器中运行它会起作用：

http://localhost/test/home/home.svg.html

在没有网络服务器的情况下运行将不工作：

file:///C:/wamp64/www/test/home/home.svg.html

此外，请使用“href”标签而不是“xlink:href”。 SVG2 不推荐使用 href 标签。 https://www.w3.org/TR/SVG2/linking.html

所以新标签是：

<svg>
  <use href="home.svg#home-icon"> </use>
</svg>

【讨论】：