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.