Question

我试图用CSS为SVG圈子的半径属性设置动画。虽然（使用Firefox Inspect Element工具）我可以看到动画本身已正确设置和运行，＆＃34; .innerCircle＆＃34;并没有明显改变。

如果您能发现我明显错过的任何内容，或以任何方式提供帮助，我将非常感激。我对此很新，所以如果我错了，请善待！

我已将我的文件粘贴在下面以供参考。

再次感谢。

styling.css：

@keyframes buttonTransition {
    from {
        r: 5%;
    }
    to {
        r: 25%;
    }
}

.innerCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: buttonTransition;
}

的index.html：

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
        </svg>
    </body>
</html>

Answer 1

在SVG 1.1中，圆的半径为attribute，而不是CSS property。

CSS动画为CSS属性设置动画，不动画属性。

这基本上是你的问题，所以你不能获得CSS动画来处理目前在Firefox或Safari上的属性。如果您选择了不透明度，填充或描边等CSS属性，那么您就可以了。

SMIL动画将对这些UA上的属性（和CSS属性）起作用。

＆＃13;

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>

＆＃13;

虽然即将发布的未完成的SVG 2规范表明大多数属性都成为CSS属性（主要是因为像你这样的用例不起作用），但是有一个解决方案即将出现。 Chrome已经实现了这一点，以确定它是否可能是您的动画在那里工作的原因。在未来的某个时刻，Firefox和Safari也可以实现这个SVG 2功能。

Answer 2

有一个简单的替代方案：动画元素比例而不是圆半径。

SMIL动画已弃用，仅由浏览器支持，原因有遗产。它可能会在将来被删除，并且永远不会出现在Edge或未来的浏览器中。

@keyframes buttonTransition {
    from {
        transform: scale(0.2);
    }
    to {
        transform: scale(1);
    }
}

.innerCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: buttonTransition;
    transform-origin: center center;
}

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
        </svg>
    </body>
</html>

Answer 3

如果有人还在研究如何做到这一点，我发现了一个非常好的解决方案，可以在不使用SMIL的情况下填充圆圈。这个解决方案有点破解，它只适用于那些有坚实填充的圆圈。基本上我所做的是动画这些圆圈的笔划宽度，看起来好像它们正在生长。

我原来的圈子

<circle cx="46" cy="46" r="2.8"/>

为此，我将圆的半径设置为接近0。

<circle cx="46" cy="46" r="0.01"/>

然后将笔划宽度设置为原始半径量的两倍，最后设置笔划宽度的动画。

@keyframes circle_animation {
    from {
        stroke-width: 0;
    }
}

circle {
    stroke-width: 5.6;
    animation: circle_animation .5s linear infinite;
}

Answer 4

由于某些浏览器版本和 SVG2 支持，

OP查询现在可以立即使用。

从SVG2开始，cx，cy和r是几何属性，这意味着这些属性也可以用作该元素的CSS属性。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute

这是从css定义所有几何的相同演示。应用相同的级联规则，如果声明了html属性，它将覆盖style属性中的样式，如果在style属性中声明了规则，则它将覆盖class规则。

@keyframes buttonTransition {
  from {
    r: 5%;
  }
  to {
    r: 25%;
  }
}

.button {
  width: 30%;
  height: auto
}

.outterCircle {
  cx: 50%;
  cy: 50%;
  r: 35%;
  stroke: #000000;
  stroke-width: 10%;
  fill: none
}

.innerCircle {
  cx: 50%;
  cy: 50%;
  r: 25%;
  fill: #000000;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: buttonTransition
}

<svg class="button">
  <circle class="outterCircle"/>
  <circle class="innerCircle"/>
</svg>

使用CSS动画调整SVG圆半径的大小

4 个答案: