SVG `xlink:href` 属性的绝对路径无法工作

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>

这样做非常好，而且正是我想要的——我们从icons.svg文件中选择id为foo的SVG。

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

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

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

关于xlink的文档似乎表明绝对路径是有效的值，这让我想知道为什么它在我的代码里不起作用——我是否漏掉了什么？

我应该考虑另一种方法吗？目前这是否不是我实现此类功能所要采取的方法？

- Nick Zuber

---

你的页面也是从端口 8080 访问的吗？引用 Chrome 的话：“域名、协议和端口必须匹配。” - Kaiido

@Kaiido 哦，原来是这样——我在 127.0.0.1:4000 上，感觉自己很蠢 :) 你能把这个作为答案吗？这会帮助其他遇到这种愚蠢错误的人。 - Nick Zuber

Answer 1

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

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

_{（强调是我的）}

- Kaiido