“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为icons.svg的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

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

  

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

_{（强调我的）}