Html 不安全的尝试加载 URL svg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29493965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unsafe attempt to load URL svg
提问by Sabumnim
I am getting an error in Chrome from trying to load an SVG on my local file system:
我在 Chrome 中尝试在本地文件系统上加载 SVG 时遇到错误：
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.
不安全的尝试从带有 URL file:///C:/Users/Me/Documents/HTML/master.html 的框架加载 URL file:///C:/Users/Me/Documents/HTML/icons.svg#menu。域、协议和端口必须匹配。
Here is my HTML:
这是我的 HTML：
<svg id="icon-menu" viewBox="0 0 70 60">
<use xlink:href="icons.svg#menu"></use>
</svg>
and the 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>
I have searched around the internet, but the only solutions I can find are for code already written in JavaScript, but this is not. The HTML above does not work in IE, giving no error, but works without a hitch in Firefox.
我在互联网上搜索过，但我能找到的唯一解决方案是针对已经用 JavaScript 编写的代码，但事实并非如此。上面的 HTML 在 IE 中不起作用，没有错误，但在 Firefox 中可以顺利运行。
采纳答案by Shikkediel
This page has all the answers, I believe :
这个页面有所有的答案，我相信：
https://css-tricks.com/svg-use-external-source/
https://css-tricks.com/svg-use-external-source/
- It just doesn't work on IE unless you use a polyfill.
- Comments down the page describe the issue on Chrome when running locally :
- 除非您使用 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.
如果您不使用服务器进行开发，则在本地开发时可能会遇到使用此技术的一些跨域问题。
回答by revoke
As I wrote on davidwells.io(on this page is also his Javascript solution of the problem):
正如我在davidwells.io上写的（在这个页面上也是他对问题的 Javascript 解决方案）：
I had the same problem when I used external SVG file. I had to change configuration of virtual server and stop automatic redirecting SVG requests from HTTP to HTTPS. Other words: SVG file must be available on both of protocols. Now it working.
当我使用外部 SVG 文件时，我遇到了同样的问题。我不得不更改虚拟服务器的配置并停止自动将 SVG 请求从 HTTP 重定向到 HTTPS。换句话说：SVG 文件必须在两种协议上都可用。现在它工作了。
回答by Paul Frank
use a server such as express.js or apache or nginx to serve the files for you want, preferably an svg sprite that holds all your images you need so you can reference them in the template or front-end like this
使用诸如 express.js 或 apache 或 nginx 之类的服务器来为您提供所需的文件，最好是一个 svg 精灵，其中包含您需要的所有图像，以便您可以像这样在模板或前端中引用它们
<svg style="color: red;">
<use xlink:href="solid.svg#ad"></use>
</svg>
and in the back end if you're using express.js in your server.js file like this,
在后端，如果您像这样在 server.js 文件中使用 express.js，
app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));
^ reference a static directory where your svg sprite lives , that way you can avoid CORS issues. another way is to set the headers using ajax which another person above me has posted a link to css-tricks.
^ 引用您的 svg 精灵所在的静态目录，这样您就可以避免 CORS 问题。另一种方法是使用 ajax 设置标题，我上面的另一个人发布了一个指向 css-tricks 的链接。
