重复所有SVG的代码功能012.sdg

如何将点击事件功能添加到所有5个路径<path id="1",<path id="2"等，而无需复制并粘贴此代码5次并每次更改ID？重复所有SVG的代码功能012.sdg

我只有中部地区（科洛桑）工作。

这是一个棋盘游戏星球大战：叛乱的游戏辅助概念的证明。这有助于帝国排除反叛者的浮渣没有隐藏在哪个系统（行星）中。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>

来源

2017-04-22 global33

's.select（ “路径”）'选择第一路径。我需要每条路径在彼此独立的3个（或更多）状态之间切换。 – global33

请注意，如果您使用数字标识，并且希望使用与CSS匹配的标识来标识它们，您会发现比使用非数字标识更复杂。 –

使用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>

来源

2017-04-22 06:19:59

重复所有SVG的代码功能012.sdg

回答

相关问题