8

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

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

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

4

3 回答 3

4

看起来这仅在Firefox 3.1下受支持。

于 2009-03-16T21:00:20.933 回答
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。总的。

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

样式.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>
于 2010-10-18T16:18:15.840 回答
0

实际上，FOP 常见问题解答是正确的，正确的语法是使用url(...). 刚刚用我的 Firefox 进行了检查，它只处理周围的填充url()。如果处理方式不同，这将是 Safari 或 Opera 中的错误。

我巧合地提出了一个类似的问题，但同样收效甚微。

干杯，

于 2009-07-09T19:11:56.187 回答