wake-up-neo.net

Onclick-Ereignis zum SVG-Element hinzufügen

Ich habe dieses Beispiel in einem SVG-Tutorial gefunden, das erläutert, wie Sie einen Onclick-Ereignishandler für ein SVG-Element verwenden können. Es sieht aus wie der folgende Code:

 <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>

Dies scheint jedoch nicht zu funktionieren. Nichts passiert, wenn ich auf das Element klicke.

Vielleicht ist es wichtig zu erwähnen, dass ich die svg aus einem php-Skript mit echo ..__ zeige. Außerdem wird der vom php-Skript generierte Inhalt mit AJAX in die Seite eingefügt und:

 XMLHttpRequest()

Könnte das vielleicht etwas damit zu tun haben? Vielen Dank für jede Hilfe. 

14
biggdman

Es scheint, dass das gesamte Javascript in der SVG enthalten sein muss, damit es ausgeführt werden kann. Ich konnte keine externen Funktionen oder Bibliotheken referenzieren. Dies bedeutete, dass Ihr Code bei svgstyle = svgobj.getStyle(); brechen musste. 

Dies wird tun, was Sie versuchen.

<?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

Demo in 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

Stellen Sie sicher, dass Sie className/id zu <use> hinzufügen. oder auch den tatsächlichen SVG-Pfad/-Element verwenden, wenn Sie außerhalb des SVG-Skriptbereichs erkennen:

<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

Wenn Sie nicht auf bestimmte Teile der SVG klicken müssen, kann dies eine mögliche Lösung sein:

Setzen Sie ein Div an die Spitze und fügen Sie diesem Div Ereignisse hinzu. z-index wird nicht benötigt, wenn sich das svg -Element vor dem div-Tag in der html-Struktur befindet.

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

Ich würde diese Methode der onclick Ereignisbehandlungsroutine für ein SVG-Element vorschlagen:

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))});
}  

Erkundigen Sie sich zuerst, ob Ihre svgobj an console.log übergeben wurde, wenn sie einen onclick-Ereignishandler erhält. Von diesem Punkt aus können Sie an alle Funktionen übergeben, um das Element zu bearbeiten. 

Sie können sehen, wie es an einem Beispiel hier funktioniert: 

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

Hinweis zur Verwendung dieses Beispiels:
- Ändern Sie den Status des SVG-Diagramms in die Option Printed.
- Klicken Sie auf eines der Elemente und wählen Sie die Ausgabe in Ihrer Konsole aus.

0
Chetabahana