W3C home > Mailing lists > Public > www-svg@w3.org > March 2014

Internal Style Sheets conflicting?

From: Stephen E Slevinski Jr <slevin@signpuddle.net>
Date: Tue, 18 Mar 2014 18:24:10 -0500
Message-ID: <5328D59A.8050101@signpuddle.net>
To: www-svg@w3.org
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;}
   </style>

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

Full example on Plunker:
http://plnkr.co/edit/Xc9xGufUGeKypCGagBB3?p=preview

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;}
   </style>

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

Thoughts?
-Steve
Received on Tuesday, 18 March 2014 23:22:51 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:54:51 UTC