使用CSS动画调整SVG圆半径的大小 [英] Resizing SVG Circle Radius Using CSS Animation
问题描述
我正在尝试使用CSS为SVG圆的radius属性设置动画.尽管(使用Firefox Inspect Element工具)可以看到动画本身已正确设置并运行，但是".innerCircle"的大小没有明显变化.
I'm trying to animate an SVG circle's radius attribute with CSS. Whilst (using the Firefox Inspect Element tool) I can see that the animation itself is setup and running correctly, the size of the ".innerCircle" doesn't visibly change.
如果您能发现我显然错过的任何事情，或者以任何方式提供帮助，我将不胜感激.我对此很陌生，所以如果我犯了这个错误，请保持友善！
If you can spot anything that I've obviously missed, or help in any way I'd be greatly appreciative. I'm rather new to this, so if I have gone about this wrong, please be kind!
我已将文件粘贴在下面以供参考.
I've pasted my files underneath for reference.
再次感谢.
@keyframes buttonTransition {
from {
r: 5%;
}
to {
r: 25%;
}
}
.innerCircle {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: buttonTransition;
}<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>推荐答案
在SVG 1.1中，圆的半径为属性，而不是 CSS属性.SVG 2对此进行了更改，而是使圆的半径成为映射到属性的CSS属性.
In SVG 1.1 the radius of a circle was an attribute and not a CSS property. SVG 2 changes this and instead makes the circle's radius a CSS property that's mapped to an attribute.
CSS动画会为CSS属性设置动画，而不会为属性设置动画.
CSS animations animate CSS properties and do not animate attributes.
Firefox现在已经实现了SVG 2规范的这一部分，因此问题中的测试用例现在可以使用，尽管编写问题时并没有.
Firefox has now implemented this part of the SVG 2 specification so the testcase in the question will work now although it didn't when the question was written.
SMIL动画将对属性(和CSS属性)起作用.
SMIL animations will work on attributes (and CSS properties).
<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>这篇关于使用CSS动画调整SVG圆半径的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
