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
Post a Comment