Html SVG使用的外部源不适用于firefox

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

唯一不同的是，在我的应用程序中，我使用了一个相对的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文件

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

主图标

---

我在这里遗漏了什么吗？

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

---

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

我发现自己遇到了这个问题。我刚刚意识到我缺少了

xmlns=”http://www.w3.org/2000/svg“

来自外部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>

主图标

---

我想你会没事的

请确保你在Web服务器上运行html。直接来说，这是行不通的

例如：

在Web服务器中运行它将起作用：

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

在没有Web服务器的情况下运行将不起作用：

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

此外，请使用“href”标记而不是“xlink:href”。SVG2不推荐使用href标记。

所以新标签应该是：

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

相对URL呢？还是我当地的环境？“./images/svg sprite.svg#home icon”与chrome和Safari配合得很好我知道小提琴上的外部示例在任何地方都不起作用，但我无法在屏幕上演示相对urlfiddle@RobertLongson完美的这就解释了我的问题。我在同一个父文件夹中添加了精灵，它在Firefox上工作。Chrome和safari并不介意这些../图片。谢谢

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