替換一個SVG元素與另一個點擊

嗨我想從SVG格式的Inkscape圖像創建一些互動內容。我從http://keith-wood.name/js/jquery.svg.js 替換一個SVG元素與另一個點擊

通過加載，svg.load一個SVG文件我想一個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>

來源

2013-12-16 David Karlsson

那麼源頁面中的示例呢？ http://keith-wood.name/svg.html#load – Babblo

我無法看到元素'switchElement'的定義，並檢查插件下面看看你來自哪個元素'switchElemetn' – Jorge

如果你想點擊svg中的一個元素，你可以嘗試像這樣[http://jsfiddle.net/wRFYn/](http://jsfiddle.net/wRFYn/） –

這是怎麼了，我終於做到了，我考察過Chrome瀏覽器開發的元素。工具，並在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}); 
      });

來源

2013-12-16 21:45:50

由於元素在頁面加載時呈現，您應該監聽已經存在的父元素的點擊;例如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); 

    }); 

});

來源

2013-12-16 16:49:49 hitautodestruct

替換一個SVG元素與另一個點擊

回答

相關問題