SVG, taille dynamique & animation

Salutation,

Je cherche actuellement à concevoir un site tournant autour d'un élément graphique en SVG. La particularité c'est que je voudrais tirer profit du format vectoriel pour redimensionner mon élément SVG selon la taille de l'écran afin qu'il prenne toute la place disponible et en même temps en animer certaines parties.


J'ai donc commencé par essayer la balise <svg> ; celle-ci permet l'animation, mais ne permet pas le redimensionnement de mon élément SVG en fonction de l'espace disponible (il faut indiquer à la balise une taille "fixe" en pixels).

J'ai ensuite essayé la balise <img> ; cette fois-ci je peux correctement dimensionner l'image à coups de pourcentages, mais elle refuse catégoriquement de réagir à la moindre sollicitation en Javascript (je ne peux pas cibler l'ID d'un composant du SVG et obtenir un feedback quelconque).

Enfin j'ai rapidement essayé la balise <object> qui n'a pas l'air de faire mieux que les deux autres.


Je cherche donc une solution pour afficher mon élément SVG en pouvant à la fois déclarer ses dimensions et pourcentage et lui attribuer un certain nombre d'animations et autres interactions à base de Javascript...

Salut,

as tout hasard, est ce que tu as regardé du coté de la balise canvas qui permet globalement d'obtenir des résultats équivalent au svg.
Du peu que j'en ai fais, je ne sais plus si il y a moyen de l’agrandir avec la fenêtre, mais bon ça peut valoir le coup d'y jeter un coup d'oeil

je modifirait l'attribut 'transform' de ton objet a redimentionner

document.getElementById(idobjet).setAttribute('transform', 'resize(' + Math.round(taille).toString()  ')');

j'ai uttilisé cette méthode avec translate et rotate mais je pense que resize fonctionne aussi, et d'ailleur j'ai testé ça que sous firefox (a voir donc)

Merci beaucoup pour vos réponses

Mathieu : merci bien mais j'aimerais ne passer au canvas qu'en dernier recours, sur ce projet j'aimerais utiliser le SVG de préférence ; notamment pour les avantages du vectoriel.

Bifur : merci également mais mon problème n'est pas comment animer, mais comment avoir une façon d'intégrer le svg qui permet à la fois de le dimensionner en pourcentages et de l'animer (avec javascript).

et avec la balise image intégré a un svg interne a la page?

<image x="0" y="0" width="300px" height="300px" xlink:href="fichier.svg"/>

tu peux essayer par le css :

html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0; height:100%; width:100% }

exemple