22

我有以下 SVG 图形：

<svg width='36' height='30'>
  <defs>
    <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/>
      <stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/>
      <stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/>
      <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
    </linearGradient>
  </defs>

  <text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text>
</svg>'

我通过 CSS 设置元素的fill属性，text并根据悬停状态在各种渐变之间切换。这在 Chrome 和 Safari 中效果很好，但在 Firefox 中，文本不会显示。检查该元素后，我发现 Firefox 将附加none到我的fill: url(#...)CSS 属性的末尾。我尝试none使用 Firebug 删除关键字，但 Firebug 只是删除了整个属性。为什么会这样？

编辑： 我应该注意，如果我删除设置属性的 CSS，并将fill属性硬编码fill到text元素中（而不是通过内联style属性），则文本会在所有浏览器中正确显示。

4

3 回答 3

39

弄清楚了。在我的 CSS 中，我引用渐变的方式与我最初引用内联填充的方式相同：

#myselector {
    fill: url('#gradient-id');
}

为了让它在 Firefox 中工作，我不得不把它改成这样：

#myselector {
    fill: url('/#gradient-id');
}

不知道为什么会这样。也许它与包含我的样式表的目录结构有关？

于 2013-02-28T14:48:24.150 回答
7

当我们用 css（外部和内部 css）分配以下代码时，SVG “fill: url(#...)” 在 Firefox 中的行为很奇怪。

#myselector {
fill: url('#gradient-id');
}

解决方案

提供内联样式，这可以通过两种方式完成。静态或动态方式

动态方式

.attr('fill', 'url(#gradient-id)')

静态方式

fill="url(#gradient-id)"

在静态中，您必须将其放在 SVG Html 中；

于 2014-03-28T16:13:16.337 回答
1

我在 SVG 中遇到了同样的问题linearGradient——还是在 2017 年。我猜，问题在于 Firefox 将其视为url('#gradient-id')普通 URL 并应用了元标记规则<base href=""/>。把它注释掉，然后检查。

于 2017-04-20T08:44:45.810 回答