Question

我正在尝试创建一个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 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只允许文件引用其他文件，如果它们位于原始文件的同一目录或子目录中。

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

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

而且我认为你会没事的

Answer 3

请确保您正在网络服务器中运行html。直接将不起作用。

示例：

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

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

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

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

此外，请使用“ href”标签代替“ xlink：href”。 href标记已被SVG2弃用。 https://www.w3.org/TR/SVG2/linking.html

因此，新标签为：

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

SVG使用外部源不在firefox上工作

3 个答案: