SVG"fill:url(#....)"在Firefox中表现得很奇怪

Question

我有以下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只删除整个属性.为什么会这样？

编辑: 我应该注意,如果我删除设置fill属性的CSS,并将属性硬编码fill到text元素中(而不是通过内联style属性),文本将在所有浏览器中正确显示.

Answer 1

弄清楚了.在我的CSS中,我指的是渐变,就像我最初引用填充内联一样:

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

为了让它在Firefox中运行,我不得不将其更改为:

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

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

Answer 2

当我们使用css(外部和内部css)分配以下代码时,SVG"fill:url(#...)"在Firefox中表现得很奇怪.

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

解

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

动态的方式

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

静态方式

fill="url(#gradient-id)" 

在静态中你必须把它放在SVG Html中;