Re: Internal Style Sheets conflicting?

On Tue, Mar 18, 2014 at 4:24 PM, Stephen E Slevinski Jr
<slevin@signpuddle.net> wrote:
> 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>

Stylesheets are not automatically scoped to anything.  Any <style>
element in the page is defining global styles for everything on the
page.

You can do <style scoped> in Firefox, but it's not implemented
anywhere else.  Otherwise, you can put an id='' attribute on each
<svg> element, and prefix all your selectors with the appropriate ID.

~TJ

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

<img> and <object> elements load their resources in a separate
document, and stylesheets dont' cross documents.

~TJ

Received on Tuesday, 18 March 2014 23:27:20 UTC