通过更改image src切换图像

Question

我希望通过单击按钮在图像之间切换，但它似乎不工作。下面的代码有问题吗?

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

编辑:

即使Raphael方法image()确实创建了一个SVGImageElement，在一个Raphael对象中，并且在这个元素上没有src属性，这意味着你应该使用image1.node.setAttributeNS("http://www.w3.org/1999/xlink", 'href', yourSrc), Raphael方法attr('src', 'yourSrc')确实照顾它:

var paper = Raphael(0, 0, 500, 200);
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;
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/y-u-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>