html – 使用CSS动画调整SVG圆半径的大小
发布时间：2020-12-30 18:33:43 所属栏目：资源 来源：网络整理
导读：我正在尝试使用CSS为SVG圆的半径属性设置动画.虽然(使用Firefox Inspect Element工具)我可以看到动画本身设置正确,但“.innerCircle”的大小没有明显改变. 如果你能发现任何我明显错过的东西,或者以任何方式帮助我都会非常感激.我对此很新,所以如果我错了,
|
我正在尝试使用CSS为SVG圆的半径属性设置动画.虽然(使用Firefox Inspect Element工具)我可以看到动画本身设置正确,但“.innerCircle”的大小没有明显改变. 如果你能发现任何我明显错过的东西,或者以任何方式帮助我都会非常感激.我对此很新,所以如果我错了,请善待！ 我已经将我的文件粘贴在下面以供参考. 再次感谢. 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 1.1中,圆的半径是 attribute而不是 CSS property.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功能. （编辑：温州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
