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文件必须在两个协议上都可用。现在它正在运作。

Answer 3

使用express.js或apache或nginx之类的服务器来提供所需的文件，最好是一个svg精灵，用于保存您需要的所有图像，以便您可以像这样在模板或前端中引用它们

<svg style="color: red;">
    <use xlink:href="solid.svg#ad"></use>
</svg>

，如果是这样，则在后端使用server.js文件中的express.js，

app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));

^引用svg sprite所在的静态目录，这样就可以避免CORS问题。另一种方法是使用ajax设置标头，而我上面的另一个人已经发布了css-tricks的链接。

加载URL svg的不安全尝试

3 个答案: