加载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在本地运行时的问题：

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

Answer 2

正如我在davidwells.io上写的（在这个页面上也是他的问题的Javascript解决方案）：

当我使用外部SVG文件时，我遇到了同样的问题。我不得不更改虚拟服务器的配置并停止自动将SVG请求从HTTP重定向到HTTPS。换句话说：SVG文件必须在两个协议上都可用。现在它正在运作。