加载URL svg的不安全尝试

Question

我在Chrome中尝试在本地文件系统上加载SVG时遇到错误:

不安全的尝试从URL文件加载URL文件:/// C:/Users/Me/Documents/HTML/icons.svg#menu:/// C:/Users/Me/Documents/HTML/master.html.域,协议和端口必须匹配.

这是我的HTML:

<svg id="icon-menu" viewBox="0 0 70 60">
   <use xlink:href="icons.svg#menu"></use>
</svg>

和SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 70 70">
  <g
     id="menu">
    <path
       d="m 10,15 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,30 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,45 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
  </g>
</svg>

我在互联网上搜索过,但我能找到的唯一解决方案是用JavaScript编写的代码,但事实并非如此.上面的HTML在IE中不起作用,没有错误,但在Firefox中没有任何障碍.

Answer 1

这个页面包含所有答案,我相信:

https://css-tricks.com/svg-use-external-source/

• 除非您使用polyfill,否则它在IE上不起作用.
• 页面下方的评论描述了Chrome在本地运行时的问题:

如果您没有使用服务器进行开发,那么在本地开发时,您可能会遇到使用此技术的一些跨域问题.