我是 SVG 动画新手，我尝试将组元素旋转 8 次 45°。 （45、90、135、180、225、270、315、360）。
下面的示例对我来说效果很好，但是如何创建整个动画的无限循环？现在它只运行一次。
我对其他可能性持开放态度......
提前致谢
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
<g>
<animateTransform attributeName="transform" type="rotate" values="45 8 8" begin="1000ms"/>
<animateTransform attributeName="transform" type="rotate" values="90 8 8" begin="2000ms"/>
<animateTransform attributeName="transform" type="rotate" values="135 8 8" begin="3000ms"/>
<animateTransform attributeName="transform" type="rotate" values="180 8 8" begin="4000ms"/>
<animateTransform attributeName="transform" type="rotate" values="225 8 8" begin="5000ms"/>
<animateTransform attributeName="transform" type="rotate" values="270 8 8" begin="6000ms"/>
<animateTransform attributeName="transform" type="rotate" values="315 8 8" begin="7000ms"/>
<animateTransform attributeName="transform" type="rotate" values="360 8 8" begin="8000ms"/>
<rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
</g>
</svg>
如果您将示例更改为仅使用一个 animateTransform 元素，其中提供了所有角度values属性，您可以使用repeatCount属性来设置动画应重复的次数。如果repeatCount设置为不确定，动画将永远重复。
我认为以下示例将满足您的需求。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
<g>
<animateTransform attributeName="transform" type="rotate"
values="0 8 8; 45 8 8; 90 8 8; 135 8 8; 180 8 8; 225 8 8; 270 8 8; 315 8 8"
dur="8s" calcMode="discrete" repeatCount="indefinite" />
<rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
</g>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
