`xlink:href` 属性的 SVG 绝对路径不起作用答案

【问题标题】：SVG Absolute Pathing for `xlink:href` Attribute Not Working`xlink:href` 属性的 SVG 绝对路径不起作用
【发布时间】：2016-08-09 00:56:18
【问题描述】：

所以我有一个包含不同路径集合的 SVG 文件：

<!-- icons.svg -->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="foo" .../>
  <path id="bar" .../>
  ...
</svg>

在我的网页中，我使用这些 SVG 图标：

<!-- index.html -->

<svg viewBox="0 0 256 256">
  <use xlink:href="icons.svg#foo">
</svg>

这工作很好，完全符合我的意图——我们从icons.svg 文件中选择ID 为foo 的SVG。

现在，如果我尝试为<use> 标记的xlink:href 属性提供一个指向我的icons.svg 文件的_absolute_ 路径，它会失败并且不返回任何内容，并且似乎无法找到该文件。。

<svg viewBox="0 0 256 256">
  <use xlink:href="http://localhost:8080/icons.svg#foo">
</svg>

请务必注意，绝对路径是正确的。

documentation on xlink seems to suggest that absolute paths are valid values，这让我想知道为什么它对我不起作用——我错过了什么吗？

是否有我应该考虑的替代方法？这不是我想要实现这样的目标的方法吗？

【问题讨论】：

您的页面是否也来自端口 8080 ？引用 chrome ：“域、协议和端口必须匹配。”
@Kaiido 啊，就是这样——我在127.0.0.1:4000，我觉得很愚蠢:) 想要回答吗？这也可以帮助其他遇到这种愚蠢错误的人

标签： svg xlink

【解决方案1】：

根据same-origin policy，您必须确保从相同的协议和端口加载外部 svg 文件，否则浏览器将阻止请求。

如果两个页面的协议、端口（如果指定了一个）和主机相同，则两个页面具有相同的来源。

_{（强调我的）}

【讨论】：