Morphing sans animation, url interne, les balises g et foreignObject

Tous les exemples sur cette page sont sans animation, sans JS au niveau de la transformation de la forme, ils ne contiennent donc qu’une transition CSS entre deux propriétés d: path("").

J’ai été ravie de voir ce truc sur css-tricks dans l’articles sur les propriétés et j’ai voulu l’essayer et voir comment il pourrait fonctionner dans diverses situations.

:hover pour souris

Pour que le morphing fonctionne, les deux formes doivent avoir le même nombres de points. Dans cet autre article sur css-tricks, on explique une autre technique, avec animation et JS, mais la partie pour les formes est bien expliquée.

Si les deux formes n’ont pas le même nombre de points, JavaScript devrait pouvoir le faire car j’ai vu que c’est aussi faisable avec la librairie d’animations GSAP.

Tenir la position du morphing avec onClick

Le onClick serait très intéressant pour des icônes réutisables, comprenant leur 2 états à même un seul SVG. C’est une chose que je compte exploré. Mais attention à la règle du nombre de points, ou trouver une solution JS!

Faire apparaître un <text> et des <circle> avec onClick

Je me suis mise à penser aux cartes de fêtes virtuelles et au annonces et bannières. Oui c'est bien faisable à même un seul SVG!

Du HTML dans un SVG avec <foreignObject>

Un <foreignObject> est un élément SVG qui permet d'intégrer du contenu HTML dans un document SVG. Cela permet d'inclure des éléments HTML tels que du texte, des formulaires, des images, etc.. L'utilisation de <foreignObject> permet de combiner les fonctionnalités de SVG et HTML dans un même document. En savoir plus : MDN

Une case à cocher dans un SVG !

J'ai voulu essayer une case à cocher pour vérifier l'ampleur des possibilités avec <foreignObject>. Cela fonctionne mais pour récupérer ensuite le label, et atteindre le path à l'extérieur du <foreignObject>, je n'y suis pas arrivée. À ce moment là, il faudrait mettre le SVG à atteindre à l'intérieur même du HTML, donc : <svg>, <foreignObject>, HTML, <svg></svg>, </foreignObject>, </svg>.

Étant donné que je ne voulais pas m'attarder sur cette curiosité, je n'ai pas poussé plus loin mais j'ai su ce que je voulais savoir : les SVG, c'est presque infini côté possiblilités!

Extrait du code pour visualiser la transition CSS

<!--Les chemins SVG qui se transforment l'un en l'autre doivent avoir les mêmes 
commandes et le même nombre de points, sinon la transformation ne fonctionnera pas.-->
<style type="text/css">
    .morphing-path path {
	d: path("M150, 10 L40, 200 L260, 200 L260, 200Z");
	fill: url(#SVGID_1_);
	transition: all 0.35s ease;
	cursor: pointer;
     }
    .morphing-path path:hover {
	d: path("M220, 10 L40, 10 L40, 220 L220, 220Z");
	fill: url(#SVGID_2_);
     } 
</style>

<!-- On attribue la classe à un groupe et on ne fait 
     que déclarer la balise <path />  -->
    <g class="morphing-path">
	<path />
    </g>
</svg>