How to create an endless animation loop in SVG
I'm new to SVG-Animation and I tried to rotate a group-element eight times by 45°. (45, 90, 135, 180, 225, 270, 315, 360). Example below works fine for me, but how do I create an endless loop of the entire animation? Now it only runs once.
I'm open minded for other pos开发者_开发知识库sibilities...
Thanks in advance
<?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>
If you change your example to use only one animateTransform element with all angles provided in the values
attribute, you can use the repeatCount
attribute to set the number of times the animation should be repeated. If the repeatCount is set to indefinite, the animation will repeat forever.
The following example I think will do what you are looking for.
<?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>
精彩评论