SVG - inherit multiple colors/animations - svg

Question

What I try to do:
Using a <use> element to copy an icon, and color the icon in two different colors when a specific class is added to the <use> element.
The Icon:
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="red5" x="0px" y="0px" viewBox="0 0 48.1 50.8">
<style type="text/css">
.st0{
fill:#D73647;
stroke:#000000;
stroke-miterlimit:10;
}
/* use.active .color-a{
fill: green;
}
use.active .color-b{
fill: blue;
}*/ // Not working...
</style>
<g>
<path class="st0 color-a" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
</path>
<path class="st0 color-b" d="M45.8,30.6L36.3,30.6C36.3,30.6 35.6,39.9 25.8,39.6C25.8,39.6 19.6,39.7 15.8,34.8L21.8,28.4L0.5,28.4L0.5,48.1L7.7,41.7C7.7,41.7 12,50.3 24.5,50.2C24.5,50.3 43.3,51 45.8,30.6z">
</path>
</g>
</symbol>
The Use Element:
<use id="svg_16"
xlink:href="#red5" transform="matrix(0.6730555893894703,0,0,0.7071457914654147,-239.09557391490307,-165.87702520953462) "
y="269.9999919533732"
x="473.99998587369964"
class="default-state"
fill="black"></use>
When the class of the <use> is changed from "default-state" to "active", I want the colors of the arrows to change (each to its own color).
What I've tried so far:
I understood that for the paths to change their color from the <use> element I have to change their CSS class to this:
.st0{
fill: inherit; // <- changed
stroke: #000000;
stroke-miterlimit: 10;
}
and the color classes to this:
use.active {
fill: green;
}
but then when I set the class of <use> to "active" they both get the same color...
I would like to do the same thing for animations.
What am I missing? How do I achive this?

Answer 1

This is how I would do it: I would create one symbol and I would reuse twice the same path: once as it is and once rotated 180 degs. For the "default" state please remove the active class of the g element.
.st0{
stroke-miterlimit:10;
}
.active .color-a{
fill: green;
}
.active .color-b{
fill: blue;
}
svg{width:90vh;border:1px solid}
<svg viewBox="0 0 140 150" >
<symbol id="a" viewBox="0 0 48.1 50.8">
<path class="st0 color-a" id="k" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
</path>
</symbol>
<g class="active" id="svg_16" >
<use class="color-a"
xlink:href="#a">
</use>
<use class="color-b" transform="rotate(180 70 75)"
xlink:href="#a"> </use>
</g>
</svg>