- From: Stephen E Slevinski Jr <slevin@signpuddle.net>
- Date: Tue, 18 Mar 2014 18:24:10 -0500
- 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