通过更改图像切换图像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

编辑：

即使拉斐尔方法image()并创造一个SVGImageElement，一个拉斐尔对象内，并且有这个元素上没有src属性，这意味着你应该使用image1.node.setAttributeNS("http://www.w3.org/1999/xlink", 'href', yourSrc)，拉斐尔方法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>