Passage d'événements de souris via l'arrière-plan SVG

J'ai deux éléments SVG, chacun couvrant l'intégralité de l'écran.Passage d'événements de souris via l'arrière-plan SVG

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect> 
 
    </svg> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect> 
 
    </svg> 
 
</body>

Même si les places ne se chevauchent pas, cliquez sur les événements ne seront jamais transmises à la place rouge, puisque le SVG avec le carré vert couvre l'écran et capture les événements de clic. Est-il possible d'avoir des événements de clic sur ces deux carrés, sans qu'ils soient dans le même SVG?

Une solution comme How can I pass ONLY clicks through a SVG with pointer-events? permet de passer des événements de clic jusqu'au carré rouge, mais uniquement si vous acceptez d'ignorer tous les événements sur le carré vert. Ajoutez simplement des événements pointeur none à la balise svg.

Source

2017-10-02 Robert Lord

Et sur tout le reste à l'intérieur du svg, ajoutez auto-pointer-events. Faire seulement les éléments à l'intérieur du svg cliquable, pas la balise svg parent.

Fonctionne en chrome.

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    pointer-events:none; 
 
} 
 
svg *{ 
 
    pointer-events:auto; 
 
}

<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect> 
 
    </svg> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect> 
 
    </svg> 
 
</body>

Source

2017-10-02 23:35:45 joopmicroop

Enveloppez vos éléments svg avec un autre élément svg. Voir here pourquoi cela fonctionne: Si un élément <svg> n'est pas le plus à l'extérieur, il ne peut pas être la cible d'événements de pointeur. Le plus externe fait ici partie d'un contexte HTML, il agit donc comme un <div>.

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <svg width="100%" height="100%"> 
 
     <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect> 
 
    </svg> 
 
    <svg width="100%" height="100%"> 
 
     <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect> 
 
    </svg> 
 
    </svg> 
 
</body>

Source

2017-10-02 23:51:29 ccprog

intéressant bidule – joopmicroop

Passage d'événements de souris via l'arrière-plan SVG

Répondre

Questions connexes