html - SVG 使用外部源不适用于 firefox

Question

我正在尝试制作一个 SVG 图标 Sprite ，就像在这个 fiddle 中一样

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 然后使用它时，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>

我是不是漏掉了什么？

Answer 1

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

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