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

2023年12月24日 351次阅读

我正在尝试使用这里描述的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/file/index.html. ‘file：’网址被视为唯一的安全来源.

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

最佳答案 没有真正的方法绕过文件：安全的事情.

但是你总是可以将SVG直接嵌入你的HTML文件中,只需< use xlink：href =“#icon-1”/> – 请记住,它会增加HTML的大小,但由于它是用于文档而不是通过Web重复下载,这可能是可以接受的.

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

点赞