Sostituire un elemento SVG con un altro su clic

Ciao Sto cercando di creare del contenuto interattivo dalle immagini di inkscape nel formato di SVG. Sto caricando un file in formato SVG attraverso, svg.load da http://keith-wood.name/js/jquery.svg.js Sostituire un elemento SVG con un altro su clic

Voglio aggiungere un listener onclick al svg caricato, in modo che io possa caricare uno SVG diversa una volta che si fa clic. Come faccio a fare questo? L'approccio nel commento qui sotto non è riuscito.

<script type='text/javascript'> 
//<![CDATA[ 
    function drawSwitch(svg) { 
     var switchElement = svg.load('./3phase_switch.svg', { 
     addTo: true, 
     changeSize: true 
    }); 
//switchElement.addEventListener("click", return function(){switchElement.setAttributeNS(null, "fill", "green");}, false); 
} 

$(window).load(function() { 
    $(function() { 
     $('#svgbasics').svg({ 
      onLoad: drawSwitch 
     }); 
    }); 
}); //]]> 
</script>

fonte

2013-12-16 David Karlsson

E l'esempio nella pagina di origine? http://keith-wood.name/svg.html#load – Babblo

Non riesco a vedere dove l'elemento 'switchElement' è definito e controllando il plugin nether vedi dove ti trovi con quell'elemento' switchElemetn' – Jorge

se vuoi fare clic su un elemento dentro lo svg puoi provare qualcosa come questo [http://jsfiddle.net/wRFYn/](http://jsfiddle.net/wRFYn/) –

Questo è quanto ho finalmente fatto, ho controllato gli elementi attraverso Chrome dev. strumenti e trovato il nome dell'elemento nell'SVG da utilizzare come target-listener (# layer1). Usando il codice qui sotto posso passare avanti e indietro tra due SVG diversi

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

fonte

2013-12-16 21:45:50

Poiché l'elemento viene sottoposto a rendering al caricamento della pagina, è necessario ascoltare un clic su un elemento padre già presente; ad esempio, il 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); 

    }); 

});

fonte

2013-12-16 16:49:49 hitautodestruct

Sostituire un elemento SVG con un altro su clic

risposta

Problemi correlati