jquery – 如何使用Snap Svg触发？

var s=Snap("#svg");
var rect=s.rect(0,100,600)
rect.attr({ 
fill:"#212121"
});

var animaTing = true;

function aniOn() {
  if (animaTing) {
    rect.animate({
      width: 400
    },1000,mina.elastic);
  };
}

function aniOff() {
  if (animaTing) {
    rect.animate({
      width: 100
    },mina.elastic);
  };
}
rect.click(function() {
  animaTing = true;
  aniOn()
});

rect.mouSEOut(function() {
  animaTing = true;
  aniOff()
});
$("#button").click(function() {
  rect.trigger('click');
});

html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#svg {
  position:absolute;
}

#button {
  margin-left:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudFlare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

<svg id="svg"  width="200" height="100%" >
</svg>
<button id="button">Click</button>

如果jQuery不能将rect识别为元素,你应该使用选择器来选择它,比如$(‘rect’)或者你想要更具体的$(‘#svg rect’),你需要在.click()函数以及.trigger(),所以它将是这样的：

jsFiddle

var s=Snap("#svg");
var rect=s.rect(0,600)
rect.attr({ 
fill:"#212121"
});

var animaTing = true;


function aniOn() {
  if (animaTing) {
    rect.animate({
      width: 400
    },mina.elastic);
  };
}



function aniOff() {
  if (animaTing) {
    rect.animate({
      width: 100
    },mina.elastic);
  };
}
$('rect').click(function() {
  animaTing = true;
  aniOn();
  console.log('clicked!') // I've added this for demonstration purpose
});

rect.mouSEOut(function() {
  animaTing = true;
  aniOff()
});


$("#button").click(function() {
  $('rect').trigger('click');
});

html,body { height: 100%; width: 100%; margin: 0; padding: 0; }
#svg { position:absolute; }
#button { margin-left:200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudFlare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg"  width="200" height="100%" ></svg>
<button id="button">Click</button>