0
如何將點擊事件功能添加到所有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>
's.select( 「路徑」)'選擇第一路徑。我需要每條路徑在彼此獨立的3個(或更多)狀態之間切換。 – global33
請注意,如果您使用數字標識,並且希望使用與CSS匹配的標識來標識它們,您會發現比使用非數字標識更復雜。 –