Selecting subelements of an External SVG template via CSS

Question

In Chrome (not FF, Safari), I’m unable to style an externally linked (xlink:href) SVG template's sub-elements by class/ID/element reference.

I’d like to know if I’m doing anything incorrectly? Has anyone else encountered this issue?

HTML:

<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></svg>

demo.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="my-icon" viewBox="0 0 21 21">
    <title>Mobile Navigation Button</title>
    <path class="fml" fill="#BADA55" d="M27.493…"/>
  </symbol>
</svg>

CSS:

.my-svg { fill: pink; }     /* will work */
#my-icon { fill: brown; }   /* won’t work in Chrome */
.fml { fill: green; }       /* won’t work in Chrome */

I’ve posted a more detailed demo here:

http://monopine.com/svg-demo/

Please reformat your question so the text looks like your actual code. Click on the "help" link next to the text box while editing if you need help formatting your text. — dg99, Jan 20 '15 at 23:29

score 0 · Answer 1 · answered Jan 22 '15 at 01:54

0

CSS does not apply across file boundaries. So any CSS in the HTML that targets elements in the external SVG will not work (or at least should not work). So rules 2 and 3 (#my-icon and .fml) should not work.

However the content of <use> elements can inherit styles from their referencer. So they should inherit the pink fill from .my-svg

answered Jan 22 '15 at 01:54

Paul LeBeau

97,474
9
154
181

thanks for the clarification. It’s odd then that FF and Safari support the ability to target the elements found in the shadow dom/external scope. – monopineu Jan 23 '15 at 08:40

Selecting subelements of an External SVG template via CSS

1 Answers1