Animação
(Obs: só funciona no Internet Explorer com o Adobe SVG)
<animate begin="0s" dur="5s" fill="freeze"/>
attributeName="width" from="120" to="40"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="20" y="10" width="120" height="40" fill="red" > <animate attributeName="width" from="120" to="40" begin="0s" dur="5s" fill="freeze"/> </rect> </svg> |
attributeType="CSS"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <circle cx="50" cy="50" r="20" fill="red"> <animate attributeType="CSS" attributeName="fill" from="yellow" to="red" begin="0s" dur="8s"/> </circle> </svg> |
attributeType="XML"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <circle cx="50" cy="50" r="20" fill="red"> <animate attributeType="XML" attributeName="r" from="20" to="40" begin="0s" dur="8s"/> </circle> </svg> |
repeatCount="indefinite"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="20" y="10" width="120" height="40" fill="red" > <animate attributeName="width" from="120" to="40" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/> </rect> </svg> |
end
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="20" y="10" width="120" height="40" fill="red" > <animate attributeName="width" from="120" to="40" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite" end="15s"/> </rect> </svg> |
<animateTransform>
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="10" y="40" width="40" height="40" fill="red" > <animateTransform attributeName="transform" type="translate" from="0,0" to="100,50" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/> </rect> </svg> |
<animateColor>
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <circle cx="50" cy="50" r="20"> <animateColor attributeType="CSS" attributeName="fill" from="aqua" to="crimson" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/> </circle> </svg> |
keyTimes="0; 1; 2; 3; 4"
Ex 1:
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="20" y="10" width="20" height="200" fill="red"> <animate attributeName="width" begin="0s" dur="3s" fill="freeze" values="100; 20; 100; 20; 100" keyTimes="0; 1; 2; 3; 4" repeatCount="indefinite"/> </rect> </svg> |
Ex 2:
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250"> <rect x="20" y="10" width="20" height="20" fill="red"> <animateTransform attributeName="transform" type="translate" begin="0s" dur="3s" fill="freeze" values="0,0; 0,100; 100,100; 100,0; 0,0" keyTimes="0; 1; 2; 3; 4" repeatCount="indefinite"/> </rect> </svg> |
Transformação
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> from="M 20 100 c 40 48 120 -32 160 -6 c 0 0 5 4 10 -3 c 10 -103 50 -83 90 -42 c 0 0 20 12 30 7 c -2 12 -18 17 -40 17 c -55 -2 -40 25 -20 35 c 30 20 35 65 -30 71 c -50 4 -170 4 -200 -79" to="M 80 100 c 40 48 120 -2 160 -36 c 0 0 5 -11 10 -18 c 10 -73 50 -23 90 -12 c 0 0 20 -48 30 22 c -2 12 -18 47 -40 17 c 5 -2 20 -5 -20 35 c 30 20 35 95 -30 86 c -80 -116 -260 94 -200 -94" fill="freeze" dur="1s" repeatCount="indefinite"/> |
Linha guia
rotate="auto"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <path fill="none" stroke="blue" d="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40"/> <path d="M0 0 v -2.5 h10 v-5 l5 7.5 l-5 7.5 v-5 h-10 v-2.5" style="fill:red"> <animateMotion dur="6s" repeatCount="indefinite" path="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" rotate="auto" /> </path> </svg> |
rotate="none"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <path fill="none" stroke="blue" d="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40"/> <path d="M0 0 v -2.5 h10 v-5 l5 7.5 l-5 7.5 v-5 h-10 v-2.5" style="fill:red"> <animateMotion dur="6s" repeatCount="indefinite" path="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" rotate="none" /> </path> </svg> |
rotate="auto-reverse"
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <path fill="none" stroke="blue" d="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40"/> <path d="M0 0 v -2.5 h10 v-5 l5 7.5 l-5 7.5 v-5 h-10 v-2.5" style="fill:red"> <animateMotion dur="6s" repeatCount="indefinite" path="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" rotate="auto-reverse" /> </path> </svg> |