单击时将SVG元素替换为另一个

Replace an SVG element with another on click

本文关键字：替换 另一个 元素 SVG 单击      更新时间：2023-09-26

嗨，我正在尝试用SVG格式从inkscape图像创建一些交互式内容。我正在通过SVG.load加载一个SVG文件http://keith-wood.name/js/jquery.svg.js

我想在加载的svg中添加一个onclick监听器，这样我就可以在单击后加载不同的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>

由于元素是在页面加载时呈现的，您应该监听已经存在的父元素上的单击；例如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 );
  });
});

这就是我最终的做法，我通过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});
            });
相关文章：