所以我有一个包含不同路径集合的 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 ,这让我想知道为什么它在这里对我不起作用 - 我错过了什么吗?有没有我应该考虑的替代方法?目前这不是我想要采取的方法来实现这样的目标吗?
最佳答案
根据 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.
(强调我的)
关于 `xlink:href` 属性的 SVG 绝对路径不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38840482/