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＆amp; Safari，但在Firefox中，文本没有显示出来。检查元素后，我发现Firefox将none追加到fill: url(#...) CSS属性的末尾。我尝试使用Firebug删除none关键字，但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中;

Answer 3

我在SVG中遇到linearGradient同样的问题 - 仍然在2017年。我想，问题是Firefox会像url('#gradient-id')一样对待普通网址并应用<base href=""/> metatag的规则。请注释并检查。

SVG“fill：url（＃....）”在Firefox中表现得很奇怪

3 个答案: