We learned that a limitation of using <use>
to insert a bit of SVG is that you can’t write compound CSS selectors that affect through there. For instance:
<svg class="parent">
<!-- shadow DOM boundary is effectively here -->
<use class="child">
<!-- stuff <use> references gets cloned in here -->
</use>
<!-- end shadow DOM boundary -->
</svg>
That shadow DOM boundary prevents selectors like
/* nope */
.parent .child {
}
from working. Perhaps someday we’ll get a working CSS selector to penetrate that shadow DOM boundary, but as of this writing it’s not here yet.
You can still set the fill on the <svg>
parent and that will cascade down through, but that only gets you one color (remember to not set the presentational fill
attribute on those shapes!).
Fabrice Weinberg thought of a neat little technique to get two colors though, exploiting the currentColor
keyword in CSS.
Set the fill CSS property on any shapes you like to currentColor:
.shape-1, .shape-2 {
fill: currentColor;
}
That way when you set the color property on the parent <svg>
, that will also cascade through. It won’t do anything all by itself (unless you have <text>
in there), but currentColor
is based off of color
so you can use it for other things.
svg.variation-1 {
fill: red;
color: orange;
}
svg.variation-2 {
fill: green;
color: lightblue;
}
Demo:
See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen.
Is there an option to do the same thing with animation? Who define it but only later define it as acting?
Animation sorta works like that right out of the box: the animation name [email protected] are defined in their own block, and then called on the property where they ought to run.
i need to animate an svg image that appears twice, in only one of them it supposed to work.
the problem is that the animation works on the entire file, and i can not play it only on one part of the svg file.
the video here shows a trick how to solve it with colors, im looking to solve this in animations…
i hope i was clear..
if you could choose a class from the svg it would solve the problem, but in the previous video he explained that there is no way.