Заменить элемент SVG другим при нажатии

Question

Привет Я пытаюсь создать некоторый интерактивный контент из изображений inkscape в формате SVG. Я загрузка SVG файла через, svg.load из http://keith-wood.name/js/jquery.svg.js

Я хочу добавить OnClick слушателя к загруженному SVG, так что я могу загрузить другой SVG раз она нажата. Как мне это сделать? Подход в комментарии ниже не удался.

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

Answer 1

Это, как я, наконец, сделал это, я проверил элементы через Chrome Dev. инструментов и нашел имя элемента в SVG для использования в качестве целевого-прослушивателя (# layer1). Используя приведенный ниже код, я могу переключаться между двумя разными SVG

  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

Поскольку элемент визуализируется при загрузке страницы, вы должны прослушивать щелчок на родительском элементе, который уже существует; например 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); 

    }); 

});