4

所以我有一个包含不同路径集合的 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从icons.svg文件中选择带有 id 的 SVG。

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

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

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

上的文档xlink似乎表明绝对路径是有效值，这让我想知道为什么它对我不起作用——我错过了什么吗？

我应该考虑另一种方法吗？这不是我想要实现这样的目标的方法吗？

4

1 回答 1

2

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

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

（强调我的）

于 2016-08-09T01:31:31.323 回答