05-12-2013, 08:12 PM
Bonjour Bonjour
Je suis en train de mettre en place une gestion événementielle autour d'un svg et je me retrouve confronté à un petit souci (j'ai une solution de contournement)
supposons que je définisse un noeud dans le dom du svg qui soit cliquable. Tout se passe bien, le visuel du noeud est cliquable.
Je positionne alors au dessus (d'un point de vue visuel utilisateur, pas dans le dom) un autre noeud translucide (ie j'applique à toute une zone un effet, de lumière, de flou, de dégradé, etc...)
Et paf, si je clic au même endroit, ce n'est plus cliquable.
Je comprends le mécanisme : c'est l'image la plus "haute" qui chope l'événement "clic" et empêche l'image d'en dessous de réagir (on n'est pas dans du bouillonnement)
la seule solution de contournement que j'identifie est de créer une troisième couche, complètement transparente, mais permettant de définir les zones de clic (et d'y mettre l'id que récupérera le javascript):
couche 1 : le dessin que l'on voit et qui doit être cliqué (d'un point de vue utilisateur)
couche 2 : la zone permettant de gérer l'effet visuel (rayon de soleil, flou, ....)
couche 3 : une copie transparente du dessin que l'on voit et qui sera la vraie zone de clic
Mais je me demandais s'il n'y avait pas des options côté JS, ou côté SVG permettant de se passer de cette surcouche sans aucun sens
un exemple (attention jquery à poser comme vous voulez, ou changer en js natif)
la zone verte de gauche (clic reussi) est juste posé là, rien au dessus
la zone verte de droite (clic_3couchesEnDessous) n'est pas cliqué réellement, c'est la couche transparente (clic_3couchesCliquable) qui l'est
Je suis en train de mettre en place une gestion événementielle autour d'un svg et je me retrouve confronté à un petit souci (j'ai une solution de contournement)
supposons que je définisse un noeud dans le dom du svg qui soit cliquable. Tout se passe bien, le visuel du noeud est cliquable.
Je positionne alors au dessus (d'un point de vue visuel utilisateur, pas dans le dom) un autre noeud translucide (ie j'applique à toute une zone un effet, de lumière, de flou, de dégradé, etc...)
Et paf, si je clic au même endroit, ce n'est plus cliquable.
Je comprends le mécanisme : c'est l'image la plus "haute" qui chope l'événement "clic" et empêche l'image d'en dessous de réagir (on n'est pas dans du bouillonnement)
la seule solution de contournement que j'identifie est de créer une troisième couche, complètement transparente, mais permettant de définir les zones de clic (et d'y mettre l'id que récupérera le javascript):
couche 1 : le dessin que l'on voit et qui doit être cliqué (d'un point de vue utilisateur)
couche 2 : la zone permettant de gérer l'effet visuel (rayon de soleil, flou, ....)
couche 3 : une copie transparente du dessin que l'on voit et qui sera la vraie zone de clic
Mais je me demandais s'il n'y avait pas des options côté JS, ou côté SVG permettant de se passer de cette surcouche sans aucun sens
un exemple (attention jquery à poser comme vous voulez, ou changer en js natif)
<!DOCTYPE html>
<html>
<head>
<title>essai clic</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg" >
<g id="clic_reussi">
<rect c="5" y="5" height="20" width="20" fill="green" />
<rect c="7" y="7" height="10" width="10" fill="yellow"/>
</g>
<g id="clic_rate">
<rect fill="red" y="5" x="40" height="10" width="60" />
</g>
<g id="clic_rate2">
<rect fill="red" y="25" x="40" height="10" width="60" />
</g>
<g id="clic_3couchesEnDessous">
<rect fill="green" y="45" x="40" height="10" width="60" />
<circle fill="yellow" cx="50" cy="50" r="5"/>
</g>
<rect fill="transparent" stroke ="black" x = "30" y="2" height="60" width="80"/>
<g id="clic_3couchesCliquable">
<rect fill="transparent" y="45" x="40" height="10" width="60" />
<circle fill="transparent" cx="50" cy="50" r="5"/>
</g>
</svg>
<script>
$("#clic_reussi").click(function () {
alert("clic reussi sur clic réussi");
});
$("#clic_rate").click(function () {
alert("clic reussi sur clic raté");
});
$("#clic_rate2").click(function () {
alert("clic reussi sur clic raté 2");
});
$("#clic_3couchesEnDessous").click(function () {
alert("clic reussi sur 3 couches en dessous");
});
$("#clic_3couchesCliquable").click(function () {
alert("clic reussi sur 3 couches clicable qui est transparent");
});
</script>
</body>
</html>
la zone verte de gauche (clic reussi) est juste posé là, rien au dessus
la zone verte de droite (clic_3couchesEnDessous) n'est pas cliqué réellement, c'est la couche transparente (clic_3couchesCliquable) qui l'est