相对文件路径和SVG符号

时间:2016-08-10 21:13:36

标签: svg xlink

在玩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在Chrome中也没有在Firefox中渲染。但为什么呢?

更新

好的,似乎是在没有网络服务器的情况下打开本地HTML文件的问题。我使用file://在浏览器中打开了HTML文件。当我通过网络服务器打开它时,两条路径都很完美。

至少Google Chrome提供了一个提示:

  

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

0 个答案:

没有答案