Firefox SVG with fill:url(#id) style in external stylesheet broken, inline styles are fine

Question

In Firefox only, if I try to give a svg path a pattern reference like:

path { fill: url(#ref); }

in an external style sheet, it renders invisible. If I do it inline, or in a tag on the page, it works.

Here is my fiddle, and here is my code dump because SO won't let me post just the fiddle. http://jsfiddle.net/v5VDp/1/

    <pattern id="texture_base" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213">
        <image x="0" y="0" width="213" height="122" xlink:href=""/>
    </pattern>

        <pattern id="texture1" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213">
        <rect fill='url(#color1)' stroke="none" x="0" y="0" width="213" height="122"/> 
            <rect fill='url(#texture_base)' x="0" y="0" width="213" height="122"/ />

    </pattern>
</defs>
</svg>

.slice:nth-child(6n + 2) path { fill: url(#texture1); }

https://dl.dropbox.com/s/wkzaoiwnw6ghsmd/simple_svg_test.css

Answer 1

#texture1 is short for <url of this file> + #texturl. So in an external stylesheet #texture1 will point to something in the stylesheet itself which won't be found as the element is in the svg file.

Webkit has always got this wrong which causes much confusion. You should find Opera matches Firefox behaviour as does IE.

If you want to do this in the stylesheet you'd have to use an absolute URL e.g. url(http://jsfiddle.net/v5VDp/1/#texture1)

This is covered by the CSS specification. You could always contact the CSS working group and suggest that they do something about it.

Answer 2

SVG “fill: url(#…)” behave strangely in Firefox when we assigning the below code with css(both external and internal css.)

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

Solution

give inline styling, this can be done in both the ways. Static or dynamic way

Dynamic way

.attr('fill', 'url(#gradient-id)')

Static way

fill="url(#gradient-id)" 

In static you have to put this in the SVG Html;