html - 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.