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

问题描述

限时删除！！

您好我正在尝试从SVG格式的Inkscape图像创建一些互动内容。
我通过从

Hi I am trying to create some interactive content from inkscape images in the format of SVG.I am loading a SVG file through, svg.load from http://keith-wood.name/js/jquery.svg.js

我想为加载的svg添加一个onclick侦听器，这样我就可以加载一个不同的SVG一旦被点击。我该怎么做呢？

I want to add an onclick listener to the loaded svg, so that i can load a different SVG once it is clicked. How do I do this? The approach in the comment below failed.

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

推荐答案

这是我最终做到的，元素通过Chrome开发。工具，并在SVG中找到用作目标侦听器（＃layer1）的元素名称。使用下面的代码，我可以在两个不同的SVG之间来回切换。

This is how I finally did it, I inspected the elements through Chrome dev. tools and found the name of the element in the SVG to use as a target-listener (#layer1). Using the code below i can switch back and forth between two different SVGs

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

这篇关于单击时将SVG元素替换为另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..