web-dev-qa-db-fra.com

Ajouter un événement onclick à un élément SVG

J'ai trouvé cet exemple dans un tutoriel SVG, qui explique comment utiliser un gestionnaire d'événements onclick pour un élément svg. Cela ressemble au code ci-dessous:

 <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

 <script type="text/ecmascript"><![CDATA[
 function changerect(evt)
 {
 var svgobj=evt.target;
 svgstyle = svgobj.getStyle();
 svgstyle.setProperty ('opacity', 0.3);
 svgobj.setAttribute ('x', 300);
}
]]>
</script>

<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
height='100' />
 </svg>

Cependant, cela ne semble pas fonctionner. Rien ne se passe lorsque je clique sur l'élément.

Peut-être qu'il est important de mentionner le fait que j'affiche le svg depuis l'intérieur d'un script php, en utilisant echo . De plus, le contenu généré par le script php est importé dans la page avec AJAX et:

 XMLHttpRequest()

Cela pourrait-il avoir quelque chose à voir avec cela? Merci beaucoup pour toute aide. 

htmlajaxhtml5domsvg
14
biggdman

Il semble que tout le javascript doit être inclus à l'intérieur du svg pour qu'il s'exécute. Je suis incapable de faire référence à une fonction externe, ou des bibliothèques. Cela signifiait que votre code était cassé à svgstyle = svgobj.getStyle(); 

Cela fera ce que vous essayez.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

<script type="text/ecmascript"><![CDATA[
    function changerect(evt) {
        var svgobj=evt.target;
        svgobj.style.opacity= 0.3;
        svgobj.setAttribute ('x', 300);
    }
]]>
</script>

<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>
18
miah

Démo dans JSFiddle

    var XMAX = 500;
var YMAX = 500;
var _xx=10;
var _reg=100;
var _l=10;
// Create PATH element
for(var x=1;x<20;x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

$('#mySvg').append(pathEl);
_l+=50;
}
5
Godly Mathew

Assurez-vous d’ajouter className/id à <use>; ou d'utiliser le chemin/élément SVG également si vous détectez en dehors de la portée du script SVG:

<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>
0
user3204205

Si vous n'avez pas besoin de cliquer sur des parties spécifiques du svg, cela pourrait être une solution possible:

Placez une div au-dessus et ajoutez des événements à cette div. z-index n'est pas nécessaire si l'élément svg est avant la balise div dans la structure html.

HTML

<div class='parent'>
  <div class='parent-events'></div>
  <div class='my-svg'><svg></svg></div>
</div>

CSS

.parent {
  position: relative;
}

.my-svg {
  position: relative;
  z-index: 0;
}

.parent-events {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1
}

Javascript

const eventArea = document.querySelector('.parent-events');
eventArea.addEventListeners('click', () => {
  console.log('clicked');
});
0
Michael Mammoliti

Je suggérerais cette méthode de onclick gestionnaire d’événements pour un élément svg:

var svgobj = parent_svg.find('svg')[0].children;

for (i = 0; i < svgobj.length; i++) {
   element = svgobj[i];
   element.style = "cursor: pointer;";
   $(element).click(function(evt){console.log($(this))});
}

Vérifiez d'abord si votre svgobj est passée à console.log lorsqu’il reçoit un gestionnaire d’événements onclick À partir de ce moment, vous pouvez passer à n'importe quelle fonction pour gérer l'élément. 

Vous pouvez voir comment cela fonctionne sur un échantillon ici: 

https://jsfiddle.net/chetabahana/f7ejxhnk/20/

Note sur l'utilisation de cet exemple:
- Modifier l’état du diagramme SVG en option Printed,
- Cliquez sur l’un des éléments puis sur la sortie dans votre console.

0
Chetabahana