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

这工作很好并且正是我想要的 - 我们 select 来自 icons.svg 的 id foo 的 SVG文件。

现在，如果我尝试为 <use> 标记的 xlink:href 属性提供我的 icons.svg 文件的_绝对_路径，它会失败并且 returns 什么都没有，似乎找不到文件。。

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

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

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

_{（强调我的）}

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

SVG Absolute Pathing for `xlink:href` Attribute Not Working

svg

xlink