Reemplazar un elemento SVG con otro al hacer clic

Hola, bash crear contenido interactivo a partir de imágenes de Inkscape en formato SVG. Estoy cargando un archivo SVG a través de, svg.load desde http://keith-wood.name/js/jquery.svg.js

Quiero agregar un oyente onclick al svg cargado, para que pueda cargar un SVG diferente una vez que se hace clic. ¿Cómo hago esto? El enfoque en el siguiente comentario falló.

 //  

Dado que el elemento se representa en la carga de la página, debe escuchar un clic en un elemento principal que ya está allí; por ejemplo, el 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 ); }); }); 

Así es como finalmente lo hice, inspeccioné los elementos a través del desarrollador de Chrome. herramientas y encontró el nombre del elemento en el SVG para usar como detector de objectives (# layer1). Usando el siguiente código, puedo cambiar entre dos SVG diferentes

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