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 and@keyframes 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.
Nowadays, it can be done without the currentColor keyword trick:
You can use the ::part() pseudo-element selector to select an element of the shadow DOM. You need to add an attribute part=”inner-box” to the element with the class=”inner-box” attribute, and after that You can select that element by
.logo-2 use::part(inner-box)
or
.logo-3 use::part(inner-box)
I forked the CodePen, and changed these details. Have a look at CodePen.