Replace an SVG element with another on click

Viewed 2722

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>           
2 Answers
Related