替换一个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元素与另一个点击

回答

相关问题