分享程序员开发的那些事...
更新时间：2021-09-06 23:09:17
在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>