Styling and SVG circle inside a <use> without using the * symbol? - css

Question

I'm using the <use> element to show duplicate SVG's. My problem is I want to style a specific part of the SVG, currently I'm doing: .spinner svg * {...}, I'm using the catch-all * because I cannot find the element I should be focusing.
I've tried .spinner svg circle {...} and all other combinations but nothing is working.
If the styling is working than the inner circle will fill pink.
So for clarity, the .spinner svg * { ... } works but because I want to add more to this SVG, I can no longer use it, and want to target the circle element directly. How may I do this?
.spinner
{
display: inline-block;
width: 3rem;
height: 3rem;
-webkit-animation: container 1568ms linear infinite;
animation: container 1568ms linear infinite;
}
.spinner svg
{
width: 100%;
height: 100%;
-webkit-animation: svg-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite;
animation: svg-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite;
stroke: #fd75c5;
}
.spinner svg *
{
transition: stroke 133ms linear;
-webkit-animation: circle-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite;
animation: circle-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite;
fill: transparent;
stroke-width: .2rem;
fill: pink;
}
#-webkit-keyframes container
{
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes container
{
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes svg-spin
{
12.5%
{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25%
{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5%
{
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50%
{
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5%
{
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75%
{
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5%
{
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
100%
{
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
#keyframes svg-spin
{
12.5%
{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25%
{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5%
{
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50%
{
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5%
{
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75%
{
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5%
{
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
100%
{
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
#-webkit-keyframes circle-spin
{
0%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
50%
{
stroke-dasharray: 100 25;
stroke-dashoffset: 50;
}
100%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
}
#keyframes circle-spin
{
0%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
50%
{
stroke-dasharray: 100 25;
stroke-dashoffset: 50;
}
100%
{
stroke-dasharray: 5 120;
stroke-dashoffset: 5;
}
}
<svg style="display:none">
<defs>
<symbol id="loader" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" />
</symbol>
</defs>
</svg>
<div class="spinner">
<svg><use xlink:href="#loader"></svg>
</div>

Answer 1

You can't style the circle via the SVG that references it. You can think of it that as the symbol doesn't exist under <div class="spinner"><use> so you can't style it that way.
What you could do is style is via the symbol. For example:
#loader circle {
fill: pink;
}
But that will change every reference to #loader. If you need to have several different spinners each styled differently, then you need to have separate copies of the spinner symbol.