样式和SVG在<use>内圈而不使用*符号？

Question

我使用<use>元素来显示重复的SVG。我的问题是我想要设置SVG的特定部分的样式，目前我正在做：.spinner svg * {...}，我使用了catch-all *因为我找不到我应该关注的元素。

我尝试过.spinner svg circle {...}以及所有其他组合，但没有任何效果。

如果造型有效，则内圈会填充粉红色。

为了清楚起见，.spinner svg * {...}有效，但因为我想为此SVG添加更多内容，我无法再使用它，并希望直接定位圆形元素。我怎么能这样做？

＆＃13;

＆＃13;

.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;
    }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法通过引用它的SVG设置圆圈的样式。您可以将其视为<div class="spinner"><use>下的符号不存在，因此您无法以这种方式设置样式。

你能做的就是通过符号来表达风格。例如：

#loader circle {
  fill: pink;
}

但这会改变对#loader的每一个引用。如果你需要有几个不同的旋转器，每个旋转器的样式不同，那么你需要有微调器符号的单独副本。