Exploration de l’élément fePointLight et des balises script et style pour une interactivité avec un curseur personnalisé

Tester l’impact du namespace

Malheureusement <style> et <script> ne s’appliquent pas qu’à l’intérieur d’un SVG une fois avoir déclaré xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink". À noter aussi que le xlink sera abandonné avec le SVG 2.

Ce SVG montre bien qu’en visant simplement <svg> par script, de même qu’en utilisant des classes qui se retrouveront ailleurs, tout se contamine et plus rien ne fonctionne comme prévu!

Contrôler les lumières avec le curseur personnalisé

Je suis ravie que cet essai ait fonctionné! Un svg qui change le curseur de l’utilisateur, c’est génial! Cela permet vraiment de penser le dessin SVG comme un petit programme autonome, portable et réutilisable, en autant qu’on ne contamine pas tout avec la façon de le programmer!

Ainsi, pour les exemple qui suivent, les classes et ID sont uniques et le script JS s’adresse à eux et non pas aux balises directement.

Pour les textes, j’ai utilisé la balise <text> propre aux SVG, ce n’est pas une inclusion HTML avec <foreignObject>, que j’ai découver plus tard. <text> est toujours valable, simple et direct.

Source d’inspiration

L’article de MDN sur le filtre SVG de lumière <feDiffuseLighting> a été le point de départ de mes essais pour contrôler <fePointLight>.