在本地查看html文件时,使用SVG`use`图标(外部参考)不会在chrome中显示图标

时间:2016-01-31 15:51:10

标签: html css google-chrome svg

我正在尝试使用此处所述的SVG图标https://css-tricks.com/svg-use-with-external-reference-take-2/

(这是它的样子)

<!-- EXTERNAL reference -->
<svg>
  <use xlink:href="sprite.svg#icon-1"></use>
</svg>

除非我在Chrome中本地打开html文件,否则它对我没有任何问题。

在开发工具中显示此错误:

不安全尝试从URL文件加载URL文件:/// D:/path/to/file/icon-defs.svg#icon-rocket:/// D:/ path / to /文件/ index.html的。 'file:'网址被视为唯一的安全来源。

周围有什么办法吗?大多数时候我使用firefox所以这对我来说不是一个大问题,但我正在构建html格式的文档,供其他用户使用...

2 个答案:

答案 0 :(得分:2)

没有真正的方法可以绕过file:安全事件。

但是你总是可以将SVG直接嵌入到你的HTML文件中而只是<use xlink:href="#icon-1" /> - 请记住它会增加HTML的大小,但是因为它是用于文档而不是重复下载通过网络,这可能是可以接受的。

无论如何,请务必优化您的SVG文件。我发现site非常有效。

答案 1 :(得分:0)

使用命令行选项--disable-web-security

启动Chrome

使用此标记运行时,请注意不要使用Chrome浏览网页。