1

在玩 SVG 符号时,我花了很多时间来找出错误,但我仍然有“为什么?”的问题。

我尝试使用xlink:href这样的包含和 SVG 符号:

<svg class="icon">
    <use xlink:href="../node_modules/icons/icons.svg#my_icon_24px"></use>
</svg>

但图标根本没有呈现。尽管文件已正确链接。(当我单击源代码中指向 SVG 文件的链接时,我可以打开它。)

但是当我将文件复制icons.svg到同一个目录中时,我的 html 文件就在其中,然后像这样包含它:

<svg class="icon">
    <use xlink:href="icons.svg#my_icon_24px"></use>
</svg>

它完美无缺。相对文件路径是否存在任何已知问题xlink:href?我猜这..是问题所在。

SVG 没有在 Firefox 中呈现,也没有在 Chrome 中呈现。但为什么?

更新

好的似乎是在没有网络服务器的情况下打开本地 HTML 文件的问题。我在浏览器中用file://. 当我通过网络服务器打开它时,两条路径都可以正常工作。

至少谷歌浏览器给出了一个提示:

从带有 URL 文件:///....../web/index.html 的框架中加载 URL 文件://....../node_modules/icons/icons.svg#my-icon 的尝试不安全。'file:' URL 被视为唯一的安全来源。

4

0 回答 0