すべてのSVGのコード機能を再実行 snap.svg

Question

クリックイベント機能を5つのすべてのパス<path id="1",<path id="2"などに5回追加して貼り付けたり、毎回idを変更することなく、どのように追加できますか？

私は中央領域（Coruscant）しか働いていません。

これは、ボードゲーム「スターウォーズ：反乱」のためのゲームプレイのための概念の証明です。これは、帝国がどのシステム（惑星）を隠していないかを排除するのに役立ちます。Image of SW: Rebellion board game map.

もし私が5を得ることができれば、地図上の全32システムに拡張する方法を理解できるはずです。

// wrap existing <svg id="mysvg"> 
 
var s = Snap("#mysvg"); 
 
// select inside of <svg> the nested element <path id="1"> 
 
// and add click event handler 'changeColor' 
 
s.select("path[id='1']").click(changeColor); 
 
// create an object. primarily to keep track of what colour to change to next. 
 
var obj = { 
 
    color: "red", 
 
    count: 1 
 
}; 
 
// function cycles the colour of the <path id="1"> 
 
// from red to orange to green back to red on click 
 
function changeColor() { 
 
    switch (obj.count) { 
 
    case 1: 
 
     obj.color = 'red'; 
 
     obj.count = 2; 
 
     break; 
 
    case 2: 
 
     obj.color = 'orange'; 
 
     obj.count = 3; 
 
     break; 
 
    case 3: 
 
     obj.color = 'green'; 
 
     obj.count = 1; 
 
    } 
 
    this.attr({ 
 
    fill: obj.color 
 
    }); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 
<svg id="mysvg" version="1.1" baseProfile="basic" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 400 200" preserveAspectRatio="none" xml:space="preserve"> 
 
<path id="1" d="M145.91,184.497l0.467-26.024l1.707-6.331l6.358,0.118c0,0,22.984-39.333,64.283-36.984 
 
\t c41.301,2.35,53.873,10.53,66.296,26.66c12.425,16.129,10.366,42.562,10.366,42.562H145.91z"/> 
 
<path id="2" d="M88.616,100.166c0,0,6.563-11.012,32.258-24.849c25.696-13.839,33.731-18.462,33.731-18.462l16.755,40.061 
 
\t c0,0,33.615-12.104,54.19-6.957l23.758,5.207l-5.063,15.809c0,0-49.159-7.263-66.878,5.133 
 
\t c-17.719,12.394-32.346,29.617-32.346,29.617l-6.359-0.116L88.616,100.166z"/> 
 
<path id="3" d="M237.673,36.119l14.539-12.455l36.443,7.031l12.249,25.667l-14.773,25.171l-19.162,4.418 
 
\t c0,0-30.056-8.502-41.184-8.705c-11.127-0.205-46.271,8.69-46.271,8.69l-16.755-40.061c0,0,19.188-6.013,38.293-7.251 
 
\t C220.156,37.385,237.673,36.119,237.673,36.119z"/> 
 
<path id="4" d="M379.785,184.497c0,0,8.589-42.256-19.409-76.163c-27.999-33.904-51.728-40.701-51.728-40.701l-14.773,25.171 
 
\t l-19.161,4.417l-9.509-1.766l-5.06,15.809c0,0,15.782,6.649,31.354,24.427c15.572,17.779,10.365,48.807,10.365,48.807H379.785z"/> 
 
<path id="5" d="M91.838,184.497l0.233-12.714l-53.607-24.839L24.45,130.788c0,0,6.767-22.141,14.832-28.352 
 
\t c8.065-6.211,17.748-13.983,17.748-13.983l78.252,68.222l-1.706,6.33l-0.023,21.492H91.838z"/> 
 
</svg>

Answer 1

すべてのパスのセットを返すようにs.selectAll("path")を使用してください。次に、forEach()を使用して、それぞれのボタンをループしてクリック機能を適用することができます。

// wrap existing <svg id="mysvg"> 
 
var s = Snap("#mysvg"); 
 
// select inside of <svg> the nested element <path id="1"> 
 
// and add click event handler 'changeColor' 
 
var paths = s.selectAll("path"); 
 
paths.forEach(function(elem) { 
 
    // create an object. primarily to keep track of what colour to change to next. 
 
    var obj = { 
 
    color: "red", 
 
    count: 1 
 
    }; 
 
    elem.click(changeColor); 
 
    // function cycles the colour of the <path id="1"> 
 
    // from red to orange to green back to red on click 
 
    function changeColor() { 
 
    switch (obj.count) { 
 
     case 1: 
 
     obj.color = 'red'; 
 
     obj.count = 2; 
 
     break; 
 
     case 2: 
 
     obj.color = 'orange'; 
 
     obj.count = 3; 
 
     break; 
 
     case 3: 
 
     obj.color = 'green'; 
 
     obj.count = 1; 
 
    } 
 
    elem.attr({ 
 
     fill: obj.color 
 
    }); 
 
    }; 
 
    
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 
<svg id="mysvg" version="1.1" baseProfile="basic" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 400 200" preserveAspectRatio="none" xml:space="preserve"> 
 
<path id="1" d="M145.91,184.497l0.467-26.024l1.707-6.331l6.358,0.118c0,0,22.984-39.333,64.283-36.984 
 
\t c41.301,2.35,53.873,10.53,66.296,26.66c12.425,16.129,10.366,42.562,10.366,42.562H145.91z"/> 
 
<path id="2" d="M88.616,100.166c0,0,6.563-11.012,32.258-24.849c25.696-13.839,33.731-18.462,33.731-18.462l16.755,40.061 
 
\t c0,0,33.615-12.104,54.19-6.957l23.758,5.207l-5.063,15.809c0,0-49.159-7.263-66.878,5.133 
 
\t c-17.719,12.394-32.346,29.617-32.346,29.617l-6.359-0.116L88.616,100.166z"/> 
 
<path id="3" d="M237.673,36.119l14.539-12.455l36.443,7.031l12.249,25.667l-14.773,25.171l-19.162,4.418 
 
\t c0,0-30.056-8.502-41.184-8.705c-11.127-0.205-46.271,8.69-46.271,8.69l-16.755-40.061c0,0,19.188-6.013,38.293-7.251 
 
\t C220.156,37.385,237.673,36.119,237.673,36.119z"/> 
 
<path id="4" d="M379.785,184.497c0,0,8.589-42.256-19.409-76.163c-27.999-33.904-51.728-40.701-51.728-40.701l-14.773,25.171 
 
\t l-19.161,4.417l-9.509-1.766l-5.06,15.809c0,0,15.782,6.649,31.354,24.427c15.572,17.779,10.365,48.807,10.365,48.807H379.785z"/> 
 
<path id="5" d="M91.838,184.497l0.233-12.714l-53.607-24.839L24.45,130.788c0,0,6.767-22.141,14.832-28.352 
 
\t c8.065-6.211,17.748-13.983,17.748-13.983l78.252,68.222l-1.706,6.33l-0.023,21.492H91.838z"/> 
 
</svg>