Le rond rouge est de plus en grand et de plus opaque puis c'est l'inverse et le cycle reprend à l'infini ...
Pour que l'image vectorielle s'adapte à tous les écrans (et donc ne
soit jamais rognée), les dimensions du canevas SVG sont exprimées en
pourcentage.
Les coordonnées initiales de l'objet SVG (le rond) sont alors exprimées par rapport au repère défini par le viewBox.
La notion de viewBox est présentée dans le tuto "Dessiner avec SVG" dans le même site.
Examinons attentivement ce script.
rond est une variable objet qui référence le cercle SVG.
var rayon = rond.getAttribute('r') : cette instruction permet de récupérer la valeur de l'attribut r du cercle.
Mais attention la valeur primitive de la variable rayon est la chaîne "10" (et non pas l'entier 10).
Et en JavaScript "10" + 2 donne 102 ! Il y a en effet concaténation (puisque l'un des termes est une chaîne).
Il faut donc avant toute tentative d'incrémentation de la variable rayon convertir cette dernière en un entier avec la fonction parseInt.
var opacite =rond.style.fillOpacity : la variable opacité récupère la valeur de la propriété de style fill-opacity.
Mais il faut écrire fillOpacity en JavaScript. La variable opacite récupère une chaîne numérique. Il faut donc la convertir sous forme d'un réel avec la fonction parseFloat.
C'est la fonction JS animate qui modifie le rayon du cercle et son opacité. Cette fonction est appelée tous les 100 millisecondes donc 10 fois par seconde via la fonction setInterval.
Etudions maintenant de plus près la fonction animate.
Pour changer en JS la valeur d'un attribut il faut utiliser la syntaxe : élément.setAttribute("attribut",valeur).
Exemple : rond.setAttribute('r',rayon)
Pour changer en JS la valeur d'une propriété de style il faut utiliser la syntaxe : élement.style.propriété = nouvelle valeur
La variable v_rayon est tantôt égale à 2 et tantôt égale à -2. Donc l'instruction rayon += v_rayon incrémente ou décrémente la valeur de rayon.
La valeur de rayon est au maximum de X/2 et au minimum de 10.
La variable v_opacite est tantôt égale à 0.01 et tantôt égale à -0.01. Donc l'instruction opacite += v_opacite incrémente ou décrémente la valeur de opacite.