xlink:href`属性的SVG绝对路径不起作用 [英] SVG Absolute Pathing for `xlink:href` Attribute Not Working

问题描述

所以我有一个SVG文件，其中包含不同路径的集合:

So I have a single SVG file that holds a collection of different paths:

<!-- 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图标:

and within my webpages, I use these SVG icons:

<!-- index.html -->

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

这可以正常运行 以及我的意图-我们从icons.svg文件中选择ID为foo的SVG.

and this works just fine and exactly how I intend -- we select the SVG with the id foo from the icons.svg file.

现在，如果我尝试为<use>标签的xlink:href属性提供指向我的icons.svg文件的_absolute_路径，它将失败并且什么也不返回，并且似乎无法找到该文件./em>.

Now, if I try to give the xlink:href attribute for the <use> tag an _absolute_ path to my icons.svg file, it fails and returns nothing and seems to be unable to find the file..

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

请务必注意，绝对路径是正确.

It's important to note that the absolute path is correct.

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

The documentation on xlink seems to suggest that absolute paths are valid values, which makes me wonder why it doesn't work here for me -- am I missing something?

我是否应该考虑替代方法?目前这不是我想采用的方法来实现这样的目标吗?

Is there an alternative approach I should be considering? Is this currently not the approach I want to take to achieve something like this?

推荐答案

您必须确保要从相同的协议和端口加载外部svg文件，否则，根据同源政策.

You have to be sure you are loading your external svg file from the same protocol and port, otherwise, browsers will block the request, according to the same-origin policy.

如果两个页面的协议，端口(如果已指定)和主机相同，则两个页面具有相同的来源.

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绝对路径不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！