在SVG中包含SVG文件

Question

我在SVG文件的defs部分中有一个linearGradient，并使用fill="url(#myGradientName)"引用它。 到目前为止，这很好用。

我认为我应该能够将整个defs部分放入自己的SVG文件中，然后只需从所有SVG图像中引用它。也就是说，类似于：

styles.svg:

<svg xmlns=...>
  <defs>
    <linearGradient id="myGradient" ...>
    </linearGradient>
  </defs>
</svg>

image.svg:

<svg xmlns=...>
  <rect width="100" height="100" fill="styles.svg#myGradient"/>
</svg>

但是我似乎无法使样式生效。我的ID语法是否有误，因为它在该文件之外(styles.svg#myGradient)？我是否需要以某种方式明确地先包含该文件？

我一直在查看SVG规范，看起来应该是可能的，但是没有任何示例显示它被执行过。

编辑：FOP FAQ建议正确的语法是fill="url(grad.svg#PurpleToWhite)"，但在Gecko或Webkit中不起作用。那是正确的，没有人支持它，还是我做错了什么？

- Ken

---

相关链接：https://dev59.com/KXrZa4cB1Zd3GeqPxQWS - leo

Answer 1

看起来这只在Firefox 3.1以下版本中支持。

- Ken

---

有关Opera或Webkit/Safari/Chrome的任何信息？ - Boldewyn

问题提到在Webkit中无法工作。我没有尝试在Opera中运行，但Gecko似乎在其他领域具有最丰富的SVG支持功能，因此如果Opera（以及其他人）不支持该功能，我会感到惊讶。 - Ken

这个 Webkit Bug 显示，即使在当前版本的 Chrome/Safari 中，这种不正确的行为仍然没有得到解决。在长期存在的修复报告中有很多抱怨，但问题仍然是未解决的，最后一个维护者因利益冲突而退出了该项目...太棒了。 - Alex Gray

Answer 2

你需要说fill="url(styles.svg#myGradient)"。这在Firefox 4 beta 6中有效，我想它在Firefox 3.5中也可用。但Chrome（7.0.517.41 beta）和IE9 beta（9.0.7930.16406）仍不支持此功能。看起来它们都在当前文档中查找#myGradient而不是实际访问指定的URL。很糟糕。

以下是我用来测试此问题的完整文件：

styles.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="black" />
    </linearGradient>
  </defs>
</svg>

image.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="url(styles.svg#myGradient)"/>
</svg>

- Jason Orendorff

---

你可以这样做，但这意味着你的渐变将内联指定到SVG文档中。如果您想在同一SVG图标的多个重复上使用不同的渐变，该怎么办？ - Michael Giovanni Pumo

@MichaelGiovanniPumo 这听起来像是一个不同的问题。我不知道答案。也许fill="currentColor"会有所帮助。如果您正在重复使用<img>或<object>包含SVG图标，则它不会继承页面样式表的CSS属性，但也许currentColor仍然有效。 - Jason Orendorff

2014年的更新：在Firefox中测试通过，但是在Chrome中没有找到渐变（渲染为黑色）。遗憾地破坏了整个“包含styles.svg”的概念。另一种选择是在服务端包含那些“defs”。 - Fabien Snauwaert

Answer 3

实际上，FOP FAQ是正确的，正确的语法是用url(...)括起来URI。我刚刚在Firefox中检查了一下，它只处理带有url()的填充。如果Safari或Opera以不同的方式处理它，那么这将是一个错误。

我碰巧提交了一个类似的问题，但是没有得到太多成功。

干杯，

- Boldewyn