After reading this article that describes how to assign colors to SVG elements inside a use instance, I would like to see if I can use the template to apply to other properties such as animation, etc. It basically tries to animate different instances of the same icon in separate paths.
Article
https://medium.freecodecamp.org/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4
A pen created for checking
https://codepen.io/asleepy/pen/PQWJVj
<svg xmlns="http://www.w3.org/2000/svg" class="defs-only">
<symbol viewBox="0 0 15 15" id="icon-radio">
<circle id="circle-outer" cx="7.5" cy="7.5" r="6.5"
fill="var(--outer-fill-color)"
stroke="var(--outer-stroke-color)" />
<circle id="circle-inner" cx="7.5" cy="7.5" r="4.5"
fill="var(--inner-fill-color)"
stroke="var(--inner-stroke-color)" />
</symbol>
</svg>
<svg viewBox="0 0 15 15" class="icon-radio one">
<use xlink:href="#icon-radio" />
</svg>
<svg viewBox="0 0 15 15" class="icon-radio two">
<use xlink:href="#icon-radio" />
</svg>
<style>
[class^='icon-'] {
width: 3rem;
transition-duration: 0.195s;
transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
transition-property: var(--inner-fill-color);
will-change: var(--inner-fill-color);
&:hover {
--inner-fill-color: rgba(255, 255, 255, 0);
}
}
#circle-outer {
stroke-width: 2;
}
.one {
--outer-fill-color: rgba(255, 255, 255, 0);
--outer-stroke-color: rgba(210, 120, 150, 0.8);
--inner-fill-color: rgba(123, 12, 34, 1);
--inner-stroke-color: rgba(255, 255, 255, 0);
}
.two {
--outer-fill-color: rgba(255, 255, 255, 0);
--outer-stroke-color: rgba(23, 47, 26, 1);
--inner-fill-color: rgba(4, 23, 69, 1);
--inner-stroke-color: rgba(255, 255, 255, 0);
}
</style>
Animation does not work. It just goes into the final state, as if the transition is not valid.
Does anyone know how to achieve this?