我有以下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,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,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); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(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属性，并根据悬停状态在各种渐变之间进行切换。这在Chrome& Safari，但在Firefox中，文本不显示。检查元素后，我发现Firefox正在追加我的填充结尾：url(#…)CSS属性。我尝试使用Firebug删除none关键字，但Firebug只是删除整个属性。为什么会发生这种情况？
编辑：
我应该注意，如果我删除设置填充属性的CSS，并将fill属性硬编码到文本元素(而不是内联样式属性)中，则文本会在所有浏览器中正常显示。
解决方法
弄清楚了。在我的CSS中，我以同样的方式指向渐变，我最初引用了内联：
#myselector {
fill: url('#gradient-id');
}
要使其在Firefox中工作，我不得不将其更改为：
#myselector {
fill: url('/#gradient-id');
}
不知道为什么会这样。也许它与包含我的样式表的目录结构有关系？
