Selecting subelements of an SVG template via CSS

Question

I'm unsure of the proper markup to structure, select, and style individual SVG instances called from a common inline SVG "template" within an HTML file.

<!-- first instance to style -->
<svg id="instance1" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg> 
<!-- second instance, want different styles -->
<svg id="instance2" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg>

In my SVG template, I have a group <g> of several paths, each of which is given a class name. I've given that SVG group an id of template, and am calling instances of it.

<!-- first instance to style -->
<svg id="instance1" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg>

<!-- second instance, want to apply different styles -->
<svg id="instance2" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg>

Now I'm attempting to select/style elements these instances in CSS as follows (though this syntax doesn't work!):

/* want to style each instance differently */   
#instance1 .outline {
    fill: red;
}

#instance2 .outline {
    fill: green;
}

I assume this is easy, but I can't figure out the correct way to select/style these individual SVGs that <use> a common set of paths.

Any ideas? Thanks!

Code snippet available for review at http://codepen.io/edhebert/pen/GgmKOo

Answer 1

Contents of <use> are cloned into a shadow DOM and hence cannot be directly selected and styled using CSS the normal straightforward way that we know.

Before going further,note that you can apply styles to the contents of a <use> element by applying the styles to the <use> itself. For example, by doing this:

<svg id="instance1" viewBox="0 0 799.9 177.8"> <use xlink:href="#template" fill="maroon"> </svg>

.. the descendants of <use> will inherit the fill color from the <use> element. But all descendants will inherit this color.

If you want to apply a specific color to only one element inside <use>, for example, another technique can be used. This technique is, however, currently limited.

The technique works by taking advantage of the CSS currentColor variable. Fabrice Weinberg wrote about this technique in this blog post over at Codepen.

Basically, if you have an SVG element that you want to reuse, instead of specifying a fill color inside the "template" on each path, you do this instead:

<g> <path fill="currentColor" d="..." /> </g>

And then, in your CSS, you can specify the color that you want, knowing that this color will be applied to the above path—because this is how currentColor works.

use#instance1 { fill: deepPink; /* will be inherited by contents of `use` */ color: #eee; /* will be inherited by the path element */ }

Someone else took this technique further by using user-defined CSS variables to do the exact same thing. You can read about it here. The CSS variables technique is the same as Weinberg's technique, except that you can define as many variables as you want, use them inside your template, and then specify their values in your CSS—these values will then be used by these variables wherever you have defined them inside the template. This technique works, but CSS variables are currently only supported in Firefox—so I don't suppose you would use it in production.

Hope this helps.