Ersetzen Sie ein SVG-Element durch einen anderen Klick

Question

Hallo Ich versuche, einige interaktive Inhalte aus Inkscape Bilder im Format von SVG zu erstellen. ich eine SVG-Datei durch, svg.load von http://keith-wood.name/js/jquery.svg.js

bin Laden möchte ich einen Onclick Hörer auf die geladene svg hinzuzufügen, so dass ich eine andere SVG laden kann, sobald es angeklickt wird. Wie mache ich das? Der Ansatz im folgenden Kommentar ist fehlgeschlagen.

Answer 1

Dies ist, wie ich es schließlich tat, ich die Elemente durch Chrome dev inspiziert. Werkzeuge und fand den Namen des Elements im SVG als Ziel-Listener (# layer1). Mit dem unten stehenden Code kann ich zwischen zwei verschiedenen SVGs hin- und herschalten

  function drawOpenSwitch(svg){ 
      var closed=false; 
      var changeSwitch = function(){ 

       $('#layer1').click(function() { 

       if(!closed){ 
        svg.clear(); 
        switchElement=svg.load('./3phase_switch_closed.svg', {onLoad: changeSwitch, addTo: true, changeSize: true}); 
       }else{ 
        svg.clear(); 
        switchElement=svg.load('./3phase_switch.svg', {onLoad: changeSwitch, addTo: true, changeSize: true}); 

       } 
       closed=!closed; 
       })}; 


      var switchElement=svg.load('./3phase_switch.svg', {onLoad: changeSwitch, addTo: true, changeSize: true}); 

      } 



      $(window).load(function(){ 
      $(function() { 
       $('#svgbasics').svg({onLoad: drawOpenSwitch}); 
      }); 

Answer 2

Da das Element beim Laden der Seite gerendert wird, sollten Sie auf ein Element klicken, das bereits vorhanden ist. zum Beispiel die document:

// Use this same as $(document).ready() 
jQuery(function($){ 

    // Listen for a click on the document but get only clicks coming from #svgbasics 
    $(document).on('click', '#svgbasics', function(){ 

    // this === #svgbasics element 
    drawSwitch(this); 

    }); 

});