SVG中使用渐变服务器作为外部文件

Question

可能重复：
在SVG中包含SVG文件

在SVG中，填充属性接受指向渐变/图案元素的URL，这是所谓的“绘画服务器”的实例。

问题：是否可以在任何浏览器（当然不包括IE）中使用在外部SVG文件中定义的渐变？比如，在rect.svg中。

<rect fill="url(grad.svg#my_grad)" />

你能否翻译一下在grad.svg中相应的<linearGradient />元素是什么？这将非常好，因为这样一个人就可以将他所有的渐变/图案存储在一个文件中并得到缓存...

谢谢，

更新: 就其意义而言，这个问题是“在SVG中包含SVG文件”的重复（其中至少回答了Firefox）。我保留我的问题，因为我认为标题和标签更容易被找到。

- Boldewyn

---

你需要在浏览器中专门使用SVG文件，还是它也适用于SVG编辑（例如Inkscape）？ 因为，如果这只是一个与浏览器相关的问题，仍然可以加载包含图案/渐变定义的SVG并将其插入DOM中，以便url()引用本地ID。 - ThibThib

我从痛苦的经历中知道，在Inkscape中它不起作用。但实际上，目前我更关心浏览器支持。 - Boldewyn

Answer 1

SVG规范只说明可以使用URI-因此这应该是可能的。当然，浏览器支持是另一回事。

我刚编写并测试了一个小样例文件。

它在Inkscape中无法工作-但在Apache Batik Toolkit中可以工作。

对于浏览器支持，我将文件上传到browsershots.org，总结如下：一些浏览器支持外部渐变-一些不支持。 例如：

• Firefox 3.0 不支持
• Firefox 3.5 支持
• Opera 9.64、10.0 支持
• Safari 4 不支持
• Chrome 2.0 不支持

- räph

---

太酷了，谢谢！我应该更经常地考虑browsershots.org... - Boldewyn

2021年在Chrome上有任何进展吗？ - chrisjshields

Answer 2

如果我理解正确，将URL更改为

<rect fill="url(grad.svg?param=my_grad" />

然后动态生成svg？

- Mercer Traieste

---

不行。问题在于当前浏览器只解析fill="url(..)"中的片段标识符，也就是以"#"开头的URL，而不是完整的URI。这与动态生成无关，但是它是访问外部文件的问题。 - Boldewyn