Internal Style Sheets conflicting?

Hi SVG list,

I ran into a problem that seems counter intuitive and I couldn't find 
any details online.

I have 2 inline SVGs on a page.  Both have internal style sheets. The 
fill color of the second SVG is overwriting the fill color of the first SVG.

==First SVG==
<svg ...
   <style type="text/css">
     path.sym-line { fill: blue;}

==Second SVG==
<svg ...
   <style type="text/css">
     path.sym-line { fill: red;}

Full example on Plunker:

Additionally, the internal style sheet can even affect standard HTML 
elements elsewhere on the page.  This seems weird.
<svg ...
   <style type="text/css">
     h1 { background: blue;}

When using an IMG or OBJECT tag, the style sheets do not cross pollinate 
or affect other elements on the page.

Must be document scope.  The scope of an inline SVG is the HTML page 
itself, so the style sheet affects the entire HTML page.  The scope of 
an IMG tag SVG is the IMG tag only, so it does not affect the rest of 
the HTML page.  Not sure how to handle this.

The best solution seems to be to write the fill attribute for each path. 
<path fill="#ffffff".  This seems like a hack, but at least it would be 


Received on Tuesday, 18 March 2014 23:22:51 UTC