Deux arcs d'ellipse animés avec le SMIL

Pour chaque arc deux animations de 5 secondes qui s'enchaînent.
La page est rechargée toutes les 10 secondes.

Le code correspondant

... <meta http-equiv ="Refresh" content ="10" > ... <svg width = '100%' height = 'auto' viewBox ="0 0 400 300" style ="border :1px solid black;" > <ellipse cx ="160" cy ="150" rx ="50" ry="20" fill ="none" stroke ="black" /> <path fill ="none" stroke ="red" stroke-width ="4"> <animate attributeName="d" attributeType ="XML" from = "M 110,150 A 50 20 0 1 1 210,150" to = "M 110,150 A 50 20 90 1 1 210,150" begin="0s" dur="5s" id = "a1"/> <animate attributeName="d" attributeType ="XML" from ="M 110,150 A 50 20 90 1 1 210,150" to = "M 110,150 A 50 20 0 1 1 210,150" begin="a1.end" dur="5s"/> </path> <path fill ="none" stroke ="green" stroke-width ="4"> <animate attributeName="d" attributeType ="XML" from = "M 110,150 A 50 20 0 0 0 210,150" to = "M 110,150 A 50 20 90 0 0 210,150" begin="0s" dur="5s" id = "a2"/> <animate attributeName="d" attributeType ="XML" from ="M 110,150 A 50 20 90 0 0 210,150" to = "M 110,150 A 50 20 0 0 0 210,150" begin="a2.end" dur="5s"/> </path> </svg>

Pour bien comprendre le code SVG de cette page je vous conseille de revoir auparavant la page sur les arcs elliptiques dans le tutoriel "Dessiner avec SVG".

Chaque animation consiste à modifier la valeur de l'attribut d de chaque chemin et plus précisèment de faire varier la rotation de l'arc d'ellipse (troisième paramètre après A). L'angle passe de 0 à 90 puis dans une deuxième étape de 90 à 0.
Afin que l'animation se déroule sans fin la page est rechargée toutes les 10 secondes.
Retour menu