html - 加载 URL svg 的不安全尝试

Question

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

Unsafe attempt to load URL file:///C:/Users/Me/Documents/HTML/icons.svg#menu from frame with URL file:///C:/Users/Me/Documents/HTML/master.html. Domains, protocols and ports must match.

这是我的 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 上的问题:

you can run into some cross-domain issues with this technique when developing locally, if you aren’t developing with a server.