对所有 SVG 重复代码功能 <path> 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
 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
 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
 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
 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
 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
 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
 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")来return一组所有的路径。然后，您可以使用 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
 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
 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
 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
 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
 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
 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
 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>

对所有 SVG 重复代码功能 <path> snap.svg

Repeat the code functionality for all the SVG <path> snap.svg

javascript

svg

snap.svg