“xlink:href”属性的 SVG 绝对路径不起作用

Question

所以我有一个 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>

这工作得很好foo，而且正是我想要的——我们从文件中选择带有 id 的 SVG icons.svg。

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

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

需要注意的是绝对路径是正确的。

的文档xlink似乎表明绝对路径是有效值，这让我想知道为什么它在这里对我不起作用 - 我是否遗漏了一些东西？

我应该考虑其他方法吗？这不是我目前想要实现的目标吗？

Answer 1

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

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

_{（强调我的）}