+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone (/showthread.php?tid=6851)
[Résolu][SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone - Ter Rowan - 05-12-2013
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)
<!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
RE: [SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone - Pio154 - 06-12-2013
Tu as :
Code :
<rect fill="transparent" stroke="black" x = "30" y="2" height="60" width="80"/>RE: [SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone - Ter Rowan - 06-12-2013
(06-12-2013, 08:44 AM)Pio154 a écrit : Tu as :
Qui écrase tout le reste, essaie de le mettre au début, et là tu pourras cliquer.Code :<rect fill="transparent" stroke="black" x = "30" y="2" height="60" width="80"/>
merci de ta réponse mais hélas non
l'objectif de ce rectangle (qui évidemment n'est pas transparent) est de créer des effets visuels, via des changements d'opacité, etc..
Si je le met avant, certes, l'objet devient cliquable, mais il ne reçoit plus la transformation liée au rectangle et donc la perte de tout l'effet visuel.
ta question m'a fait pensé au z-index, mais voilà, il semble que cela ne marche pas avec svg
pour illustrer, remplace la ligne avec
<rect fill="rgba(255,255,0,0.6)" z-index="50" stroke ="black" x = "30" y="2" height="60" width="80"/>
RE: [SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone - Xenos - 06-12-2013
Via la propriété CSS pointer-events, tu peux indiquer qu'un élément ne réagit pas à la souris. Compatible grosso-modo partout sous condition d'avoir un navigateur à jour.
Toutefois, comme l'alerte le signale, son application à SVG est expérimentale et devra attendre le CSS4 pour (peut-être) être officialisée.
RE: [SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone - Ter Rowan - 06-12-2013
(06-12-2013, 10:59 AM)Xenos a écrit : Via la propriété CSS pointer-events, tu peux indiquer qu'un élément ne réagit pas à la souris. Compatible grosso-modo partout sous condition d'avoir un navigateur à jour.
Toutefois, comme l'alerte le signale, son application à SVG est expérimentale et devra attendre le CSS4 pour (peut-être) être officialisée.
arf merci c'est nickel, et encore mieux que ce que tu dis :
Citation : L'utilisation de pointer-events en CSS pour des éléments non SVG est expérimentale.
c'est pas expérimental pour SVG. Faut dire que ça manquait vraiment, si y avait pas de z-index, fallait trouver autre chose.
Merci bien !
[Résolu][SVG,Javascript] capter le clic sur une zone qui est "sous" une autre zone - Xenos - 06-12-2013
>.< J'ai lu de travers...