Snap Svgでトリガーするには？

Question

トリガーイベントがsnap.svgで機能しないようですか？

基本的には、clickイベントをトリガーしますが、それはsnap.svgで動作していないようです。または何か間違っています。

私はそれを解決することができませんでした。

それでは、どのようにそれを行うには？

JSFIDDLE

var s=Snap("#svg"); 
 
var rect=s.rect(0, 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 
 
    }, 1000, 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>

Answer 1

rectが要素としてのjQueryで認識されていない、あなたは$('rect')ようにしたり、$('#svg rect')より具体的にしたい場合は、それを選択するセレクタを使用する必要がありますし、あなたは.click()機能だけでなく、.trigger()の両方でこれを行う必要があるので、このようなものになるでしょう：

jsFiddle

var s=Snap("#svg"); 
 
var rect=s.rect(0, 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 
 
    }, 1000, 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>