Décoration balise HTML avec SVG

[rgamor]

Bonjour,

Je souhaiterai décorer des balise div par exemple avec du SVG. Mais comme le HTML et le SVG sont deux DOM différents, il est donc impossible d'imbriquer dans le code SVG la balise à décorer en question.
Le problème est que je ne vois pas comment positionner le SVG par rapport à la balise, en utilisant le moins possible javascript. Peut être avec du XSL??

[miss_socrates]

Je n'ai pas bien compris : "décorer des balises div". est-ce mettre des bordures aux blocs ? Ou colorer les tags dans Notepad par ex. lorsqu'on tape le code ?

[rgamor]

Comme des bordures mais en plus extravagant.

[Bovino]

Euh... non, tu ne peux pas intégrer du SVG dans une balise... Ceci dit, je ne comprends vraiment pas ce que tu veux réaliser au final

[rgamor]

Disons par exemple, qu'on a une balise div avec un contenue sur le thème de la nature, je souhaiterai au lieu d'utiliser les bordures, utiliser du SVG afin d'être plus libre, comme par exemple faire des bordures style lierre, tout autour comme ça
Et pourquoi pas lui faire subir une animation lorsque l'on passe la souris sur la balise.

C'est bien ce qui me semblait alors. Il faut utilisé javascript pour récupéré les coordonnées de la balise pour les passer au DOM du SVG afin de calquer le dessin SVG sur la balise à encadrer.

[Vil'Coyote]

ou voir si du côté du CSS tu ne pourrais pas trouver ton bonheur en terme de "packaging" pour tes div et animations.

[rgamor]

qu"est-ce que tu appelles packaging?

[Vil'Coyote]

Envoyé par rgamor

qu"est-ce que tu appelles packaging?

ce que tu demande.

[rgamor]

je vois pas très bien comment faire en css. Avec le CSS c'est soit des bordures banales, ou alors des images mais dans ce cas la les animations agissent sur l'image entière.
Ce que j'aurais voulu c'est une animation du genre, si on reprend l'exemple précédent, faire bouger les feuilles indépendamment, comme si le vent soufflait dans les feuilles.

[Vil'Coyote]

ok donc utilisation de gif animé pour le css ou alors passer à des site "animé" via l'utilisation de flash ou silverlight mais d'html

[rgamor]

justement je voulais éviter d'utiliser du flash ou silverlight. J'aurais voulu utiliser uniquement du HTML5,CSS3, SVJ et javascript.
Le problème du gif c'est que je trouve pas ça vraiment interactif et c'est impossible de redimensionner dynamiquement avec du JS, et en plus si tu agrandis trop tu verras les pixels. Enfin plein de petites choses qui m'avaient fait pencher vers le SVG.

Je vais développer un petit truc et vous me direz ce que vous en pensez.

[Bovino]

Avec CSS3, tu peux toujours voir avec les transitions, animations, etc.

[danielhagnoul]

Bonsoir

Pour des interactions entre du SVG et JS, j'utilise Raphael et jQuery. On peut placer du SVG dans une division, et l'on peut réaliser des animations purement SVG. Mais je suis débutant j+n en Raphael et en SVG, je n'ai pas la solution à votre problème, juste une piste.

[rgamor]

intéressant