我试图用CSS动画SVG圆的半径属性。同时(使用Firefox Inspect Element工具),我可以看到动画本身已设置并正确运行,“.innerCircle”的大小没有明显改变。使用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>
“SVG的SMIL动画(,等)已被取消,将被删除,请使用CSS动画或Web动画来代替。”我的控制台 –
krummens
@ krummens据推测,未来的Chrome更新会在他们改变主意时删除该弃用警告。 –
认真吗?我做了很多关于不能使用的想法,而且这很糟糕。所以我做了所有这些都没有? –
krummens