按照这个主题:
和这个主题:
SVG标记'animateTransform'效果不佳.用CSS或CSS转换替换SMIL(animate标签)会很不错.
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
下一个Google Chrome警告:
CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
首先,我需要实现三件事:
它怎么样:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the …我正在尝试使用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 = …