大佬教程收集整理的这篇文章主要介绍了html – 使用CSS动画调整SVG圆半径的大小，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果你能发现任何我明显错过的东西,或者以任何方式帮助我都会非常感激.我对此很新,所以如果我错了,请善待！
我已经将我的文件粘贴在下面以供参考.
再次感谢.
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>
CSS动画为CSS属性设置动画,不为动画属性设置动画.
这基本上是你的问题所以你不会得到CSS动画来处理目前在Firefox或Safari上的属性.如果您选择了不透明度,填充或描边等CSS属性,那么您就可以了.
SMIL动画将处理这些UA上的属性(和CSS属性).
<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>
虽然即将发布的未完成的SVG 2规范表明大多数属性都成为CSS属性(主要是因为像你这样的用例不起作用),但是有一个解决方案即将出现. Chrome已经实现了这一点,以确定它是否可能是您的动画在那里工作的原因.在未来的某个时刻,Firefox和Safari也可以实现这个SVG 2功能.
以上是大佬教程为你收集整理的html – 使用CSS动画调整SVG圆半径的大小全部内容，希望文章能够帮你解决html – 使用CSS动画调整SVG圆半径的大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。