在 SVG 中包含 SVG 文件

Question

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

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

styles.svg：

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

图像.svg：

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

但我似乎无法应用该样式。我对这个文件 (styles.svg#myGradient) 外部的 ID 有错误的语法吗？我是否需要先以某种方式明确包含该文件？

我一直在研究 SVG 规范，看起来这应该是可能的，但没有一个示例实际上表明它已经完成。

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

Answer 1

好像只有Firefox 3.1支持这个。

Answer 2

其实，FOP FAQ 是对的，正确的语法是用url(...) 包含URI。刚刚检查了我的 Firefox，它处理 only 周围的 url()。如果处理方式不同，这将是 Safari 或 Opera 中的错误。

我碰巧提交了similar question，但同样收效甚微。

干杯，

Answer 3

您确实需要说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>

图像.svg

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