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


in firefox only, if try give svg path pattern reference like:

path { fill: url(#ref); }

in external style sheet, renders invisible. if inline, or in tag on page, works.

here fiddle, , here code dump because won't let me post 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

#texture1 short <url of file> + #texturl. in external stylesheet #texture1 point in stylesheet won't found element in svg file.

webkit has got wrong causes confusion. should find opera matches firefox behaviour ie.

if want in stylesheet you'd have use absolute url e.g. url(http://jsfiddle.net/v5vdp/1/#texture1)

this covered css specification. contact css working group , suggest it.


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -