无法将外部源加载到 SVG 的 <use> 标签答案

【问题标题】：Can't load External Source to <use> tag of SVG无法将外部源加载到 SVG 的 <use> 标签
【发布时间】：2015-07-26 20:56:01
【问题描述】：

我遇到了一个错误，我真的不知道如何处理它。这是错误是：[来自 Cr]

Unsafe attempt to load URL file:///C:/Users/Ho%20Thi%20Kim%20Loan/Desktop/BeTe/assets/file-text2.svg#icon-file-text2 from frame with URL file:///C:/Users/Ho%20Thi%20Kim%20Loan/Desktop/BeTe/index.html. Domains, protocols and ports must match.

我的代码看起来就像CSS-Trick，

<svg viewBox="0 0 100 100">
   <use xlink:href="assets/file-text2.svg#icon-file-text2"></use>
</svg>

我的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <symbol id="icon-file-text2" viewBox="0 0 1024 1024">
        <title>file-text2</title>
        <path class="path1" d="M917.806 229.076c-22.212-30.292-53.174-65.7-87.178-99.704s-69.412-64.964-99.704-87.178c-51.574-37.82-76.592-42.194-90.924-42.194h-496c-44.112 0-80 35.888-80 80v864c0 44.112 35.888 80 80 80h736c44.112 0 80-35.888 80-80v-624c0-14.332-4.372-39.35-42.194-90.924zM785.374 174.626c30.7 30.7 54.8 58.398 72.58 81.374h-153.954v-153.946c22.984 17.78 50.678 41.878 81.374 72.572zM896 944c0 8.672-7.328 16-16 16h-736c-8.672 0-16-7.328-16-16v-864c0-8.672 7.328-16 16-16 0 0 495.956-0.002 496 0v224c0 17.672 14.326 32 32 32h224v624z"></path>
        <path class="path2" d="M736 832h-448c-17.672 0-32-14.326-32-32s14.328-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32z"></path>
        <path class="path3" d="M736 704h-448c-17.672 0-32-14.326-32-32s14.328-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32z"></path>
        <path class="path4" d="M736 576h-448c-17.672 0-32-14.326-32-32s14.328-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32z"></path>
    </symbol>
</defs>

上面的SVG图片属于IcoMoon

现在我真的很想知道如何处理这个错误。我所有的协议和端口都匹配，这是 localhost。它到底怎么可能有一个域？（你不认为这是一个错误吗？）

【问题讨论】：

Chrome 将本地文件视为外部域。它不被视为错误。其他浏览器没有这种行为。您可以通过从命令行/终端启动并将 allow-file-access-from-files 设置为参数来在 Chrome 上停用此功能。怎么做取决于你的操作系统。
谢谢@JulienGrégoire，但你能澄清一下'设置允许文件访问来自文件作为参数'的部分吗？我不太确定该怎么做。而 Cr 只考虑本地文件或任何类型的主机？我打算制作一个 Cr 应用程序...（我使用的是 Windows 8.1）
你好伙计 - 如果你找到解决这个问题的方法，我只是在徘徊。我得到了完全相同的问题，遵循 Chris Coyer 的完全相同的建议 :)
我也遇到了同样的问题@StarLight，如果您找到解决此问题的方法，请告诉我。

标签： html google-chrome svg

【解决方案1】：

根据@Julien 的评论，这不会在本地工作（不在 Chrome、Opera 或 IE 中，但在 Firefox 上很好），所以你需要在服务器上完成这一切。

我还发现，在我的情况下（就像在你的情况下一样），这也是从我的外部 svg 文件中删除 <defs></defs> 元素的问题，因为它会阻止其内容被显示。

所以继续清除它，一切都应该按预期工作。

【讨论】：