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中不起作用。这是正确的，没有人支持它，或者我做错了什么？

Answer 1

看起来这只支持Firefox 3.1。

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>

Answer 3

我想我可能刚刚在这个帖子here中回答了你的问题。

Answer 4

实际上，FOP常见问题是正确的，正确的语法是url(...)包含URI。刚刚使用我的Firefox进行检查，它只使用周围的url()来处理。这将是Safari或Opera中的一个错误，如果它处理不同。

我巧合地提交了similar question，但同样没什么成功。

干杯，

在SVG中包含SVG文件

4 个答案: