`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>

这工作得很好，正是我想要的——我们选择了 ID 为 foo 的 SVG。来自 icons.svg文件。

现在，如果我尝试给 xlink:href <use> 的属性标记到我的 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 ，这让我想知道为什么它在这里对我不起作用 - 我错过了什么吗？

有没有我应该考虑的替代方法？目前这不是我想要采取的方法来实现这样的目标吗？

Answer 1

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

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.

(强调我的)