5

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

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>
David Karlsson
  • 9,396
  • 9
  • 58
  • 103
  • What about the example in source page? http://keith-wood.name/svg.html#load – Babblo Dec 16 '13 at 15:00
  • I cannot see where the element `switchElement` is defined and checking the plugin nether see where do you come with that element `switchElemetn` – Jorge Dec 16 '13 at 15:04
  • 1
    if you want the click on one element inside the svg you can try something like this [http://jsfiddle.net/wRFYn/](http://jsfiddle.net/wRFYn/) – Abraham Uribe Dec 16 '13 at 18:39

2 Answers2

2

Since the element is being rendered on page load you should listen for a click on a parent element that is already there; for example the 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 );

  });

});
hitautodestruct
  • 20,081
  • 13
  • 69
  • 93
0

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});
            });
David Karlsson
  • 9,396
  • 9
  • 58
  • 103
  • You are showing how to modify properties of an existing svg element (or that's how I understand it). But what if I want to relace existing element with another one? Any idea? – Mark Mar 30 '18 at 18:17