Nat*_*ell 10 html css svg css-animations
我正在尝试使用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>Rob*_*son 10
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功能.
有一个简单的替代方案:动画元素比例而不是圆半径.
不推荐使用SMIL动画,只有浏览器支持SMIL动画.它可能会在将来被删除,并且永远不会出现在Edge或未来的浏览器中.
@keyframes buttonTransition {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.innerCircle {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: buttonTransition;
transform-origin: center center;
}<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>