SVG "fill: url(#....)" behaving strangely in Firefox

css firefox svg gradient fill
Nathan Friend picture Nathan Friend · Feb 27, 2013 · Viewed 33.2k times · Source

I have the following SVG graphic:

<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>'

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?

EDIT: 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.

Answer

Nathan Friend picture Nathan Friend · Feb 28, 2013

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');
}

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?

Related questions

Setting transform-origin on SVG group not working in Firefox

I am having an issue with getting transform-origin to work in Firefox (v.18+, other versions not tested). Webkit browsers work as expected. I'm trying to set the origin to the center of the group, but nothing I've tried has worked …

Read More
How do I scale an SVG background-image without honoring aspect ratio in Firefox?

I've got a CSS background-image set on an element of fluid height and width. It's an SVG, and the intended behavior is for it to stretch in whatever directions necessary to cover the entirety of the element's area. In Chrome, …

Read More
SVG filter only working when added in style attribute (Firefox)

I added a blur effect svg to my HTML(text/html): <html> <head>...</head> <body> ... <svg xmlns="http://www.w3.org/2000/svg" height="0"> <filter height="116%" width="116%" y="-8%" x="…

Read More