通过更改图像src切换图像

Question

I wish to toggle between images by clicking on a button, but it doesn't seem to be working. Is there anything wrong with the code below?

var paper = new Raphael(document.getElementById("mySVGCanvas")); 

var image1 = paper.image("https://tromoticons.files.wordpress.com/2012/11/y-u-no.png?w=350&h=300&crop=1", 10, 10, 100, 100);

var myState = 0

button1.node.addEventListener('click', function(){
        console.log("this part is working...");
        if (myState === 0){
            myState = 1;
            image1.src = "http://www.sherv.net/cm/emoticons/trollface/success-troll-smiley-emoticon.png"

        } else{
            myState = 0;
            image1.src = "https://tromoticons.files.wordpress.com/2012/11/y-u-no.png?w=350&h=300&crop=1"

            };
        }

Answer 1

Edit :

Even if the Raphael method image() does create an SVGImageElement , inside a Raphael Object and that there is no src attribute on this element, meaning you should use image1.node.setAttributeNS("http://www.w3.org/1999/xlink", 'href', yourSrc) , the Raphael method attr('src', 'yourSrc') does take care of it :

 var paper = Raphael(0, 0, 500, 200); var image1 = paper.image("https://tromoticons.files.wordpress.com/2012/11/yu-no.png?w=350&h=300&crop=1", 10, 10, 100, 100); var myState = 0; var button1 = paper.circle(10, 10, 20); button1.attr("fill", "#f00"); button1.node.addEventListener('click', function() { if (myState === 0) { myState = 1; image1.attr('src', "http://www.sherv.net/cm/emoticons/trollface/success-troll-smiley-emoticon.png"); } else { myState = 0; image1.attr('src', "https://tromoticons.files.wordpress.com/2012/11/yu-no.png?w=350&h=300&crop=1"); } }, false); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>