SVG“fill：url（＃....）在Firefox中表现奇怪 [英] SVG "fill: url(#....)" behaving strangely in Firefox

问题描述

我有以下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>'

我设置了 / code>元素的属性，并根据悬停状态在各种渐变之间切换。这在Chrome& Safari，但在Firefox中，文本不会显示。检查元素后，我发现Firefox正在 fill：url（＃...） none c> CSS属性。我尝试删除 none 关键字与Firebug，但Firebug只是删除整个属性。为什么会发生这种情况？

I set the fill attribute of the text element through CSS and switch between the various gradients depending on the hover state. This works great in Chrome & Safari, but in Firefox, the text doesn't show up. Upon inspecting the element, I discovered that Firefox is appending none to the end of my fill: url(#...) CSS attribute. I tried deleting the none keyword with Firebug, but Firebug just deletes the entire attribute. Why is this happening?

编辑：
我应该注意，如果我删除设置 fill 属性，并将 fill 属性硬编码到 text

I should note that if I remove the CSS that sets the fill property, and hardcode the fill attribute into the text element (not through an inline style attribute), the text displays properly in all browsers.

推荐答案

想想吧。在我的CSS中，我指的是渐变，以相同的方式，我最初引用填充内联：

Figured it out. In my CSS, I was referring to the gradients in the same way I was originally referencing the fill inline:

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

要使其在Firefox中正常工作， / p>

To get it working in Firefox, I had to change it to this:

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

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

Not sure why this is. Maybe it has something to do with the directory structure containing my stylesheet?

这篇关于SVG“fill：url（＃....）在Firefox中表现奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！