logo标签列表

根据变量重叠SVG路径事件

javascriptjqueryhtmlsvg
4
我制作了一个篮球SVG球场。在这个SVG中，有两条重要的路径对我很有用：#inside_area_a和#threepoint_area_b，以及#inside_area_b和#threepoint_area_b。 #inside_area_a与#threepoint_area_b重叠，#inside_area_b与#threepoint_area_a重叠。使用jQuery，我想根据变量只让其中一对（a或b）可点击。例如，
if(poss=="home"){
    //#inside_area_a and #threepoint_area_a click functions
}
else //#inside_area_b and #threepoint_area_b click functions

这该如何使用jQuery实现呢？ 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve">
  <style type="text/css">
    svg {
      height: 100%;
    }
    .st0 {
      fill: none;
      stroke: #010101;
      stroke-width: 3;
    }
    #inside_area_a {
      fill: transparent;
    }
    #inside_area_b {
      fill: transparent;
    }
    #inside_area_a:hover {
      fill: #1abc9c;
    }
    #inside_area_b:hover {
      fill: #1abc9c;
    }
  </style>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve">
  <style type="text/css">
    svg {
      height: 100%;
    }
    .st0 {
      fill: none;
      stroke: #010101;
      stroke-width: 3;
    }
  </style>
  <rect id="XMLID_28_" x="5.2" y="24.3" class="st0" width="0" height="186.7" />
  <path id="inside_area_a" class="st0" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" />
  <path id="threepoint_area_a" class="st0" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3
         v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" />
  <path id="inside_area_b" class="st0" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" />
  <path id="threepoint_area_b" class="st0" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4
         s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" />
  <line id="center_line" class="st0" x1="217.8" y1="231.9" x2="217.8" y2="3.4" />
  <ellipse id="center_circle" class="st0" cx="217.8" cy="117.6" rx="27.3" ry="26.9" />
  <line id="freethrow_line_a" class="st0" x1="93.3" y1="144.5" x2="93.3" y2="90.8" />
  <line id="freethrow_line_b" class="st0" x1="342.4" y1="144.5" x2="342.4" y2="90.8" />
  <path id="freethrow_circle_a" class="st0" d="M93.3,90.8c15.1,0,27.3,12,27.3,26.9s-12.2,26.9-27.3,26.9" />
  <path id="freethrow_circle_b" class="st0" d="M342.4,144.5c-15.1,0-27.3-12-27.3-26.9s12.2-26.9,27.3-26.9" />
  <line id="freethrow_lane_line_a_left" class="st0" x1="93.3" y1="144.5" x2="4.6" y2="144.9" />
  <line id="freethrow_lane_line_a_right_dashes" class="st0" x1="4.4" y1="90.8" x2="93.8" y2="90.8" />
  <line id="freethrow_lane_line_b_left_dashes" class="st0" x1="431.1" y1="144.5" x2="342" y2="144.5" />
  <line id="freethrow_lane_line_b_right_dashes" class="st0" x1="430.6" y1="90.8" x2="342.2" y2="90.8" />
  <line id="basket_board_a" class="st0" x1="23.4" y1="131.1" x2="23.4" y2="104.2" />
  <line id="basket_board_b" class="st0" x1="412.3" y1="131.1" x2="412.3" y2="104.2" />
  <line id="basket_holder_a" class="st0" x1="23.4" y1="117.6" x2="27.9" y2="117.6" />
  <line id="basket_holder_b" class="st0" x1="412.3" y1="117.6" x2="407.7" y2="117.6" />
  <ellipse id="XMLID_27_" class="st0" cx="31.7" cy="117.6" rx="3.8" ry="3.7" />
  <ellipse id="basket_b" class="st0" cx="403.9" cy="117.6" rx="3.8" ry="3.7" />
</svg>

1个回答
1
我复制了你的“内部”和“三点”区域。对于一个集合，我保留了它们原来的id。对于另一个集合，我在id前面加上了“select_”。这两个集合允许我将悬停目标与颜色目标分开。(对于更复杂的图形，你应该动态地进行这种复制，但是这种手动复制足以证明这种技术。)
我将原始元素放在svg元素堆栈的“底部”(即svg代码的开头附近)，以便着色时不会隐藏任何黑线。(请注意，我必须稍微重新排列这些元素，以便在着色时，三点区域不会覆盖内部区域。)然而，我将重复的集合放在svg堆栈的“顶部”(即svg代码的结尾附近)，以便悬停目标位于最上层。
然后我隐藏了所有重复的元素，也就是那些会触发悬停事件的元素，以便最初无法检测到任何悬停。当点击一个团队的按钮时，只有该团队的一个可悬停的“内部”区域和一个可悬停的“三分”区域变为“可见”。这些仍然对观众不可见（填充始终为透明），但从现在开始成为悬停目标（可见性从隐藏更改为可见）。因此，悬停目标基本上取决于选择哪个团队而交换。请注意，所有目标的可悬停性始终保持不变。只是其中的4个中只有2个在任何时间点上是可见的，因此真正可悬停。
包含双重嵌套forEach循环的代码只是设置所有jQuery悬停事件的简洁方式。
更新：您问了要点击哪个区域。我更新了代码以显示适当的目标是以“select_”开头的那些ID。我通过实现简单的游戏得分更新来演示这一点，通过点击主队或客队的2或3分区域来完成。 

var $btn = $('button');
var ins    = 'inside_area_';
var thr    = 'threepoint_area_';
var selIns = 'select_' + ins;
var selThr = 'select_' + thr;
var score  = {home: 0, away: 0};

[[ins, selIns], [thr, selThr]].forEach(function(areas) {
  ['a', 'b'].forEach(function(side) {
    $('#' + areas[1] + side).hover(
      function() {$('#' + areas[0] + side).css('fill', '#1abc9c'    );},
      function() {$('#' + areas[0] + side).css('fill', 'transparent');}
    );
    $('#' + areas[1] + side).click(basketballShotHandler);
  });
});

function basketballShotHandler(evt) {
  areaClicked = evt.target.id;
  var team, pts;
  switch (areaClicked) {
    case 'select_inside_area_a':     team = 'home'; pts = 2; break;
    case 'select_threepoint_area_a': team = 'home'; pts = 3; break;
    case 'select_inside_area_b':     team = 'away'; pts = 2; break;
    case 'select_threepoint_area_b': team = 'away'; pts = 3; break;
  }
  score[team] += pts;
  $('#homeScore').text(score.home);
  $('#awayScore').text(score.away);
}

$btn.click(function(e) {
  var currentSide, opposingSide;
  switch (e.target.innerText) {
    case 'Home':
      currentSide = 'a';
      opposingSide = 'b';
      break;
    case 'Away':
      currentSide = 'b';
      opposingSide = 'a';
      break;
    }
  $('#' + selIns + currentSide).css('visibility', 'visible');
  $('#' + selThr + currentSide).css('visibility', 'visible');
  $('#' + selIns + opposingSide).css('visibility', 'hidden');
  $('#' + selThr + opposingSide).css('visibility', 'hidden');
});
svg {
  height: 100%;
}
.st0 {
  fill: none;
  stroke: #010101;
  stroke-width: 3;
}
.st1 {
  fill: transparent;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="home">Home</button>
<button id="away">Away</button>
<span>Home: <span id="homeScore">0</span> Away: <span id="awayScore">0</span></span>
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve">
  <rect id="XMLID_28_" x="5.2" y="24.3" class="st0" width="0" height="186.7" />
  <path id="threepoint_area_a" class="st0" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3 v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" />
  <path id="threepoint_area_b" class="st0" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4 s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" />
  <path id="inside_area_a" class="st0" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" />
  <path id="inside_area_b" class="st0" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" />
  <line id="center_line" class="st0" x1="217.8" y1="231.9" x2="217.8" y2="3.4" />
  <ellipse id="center_circle" class="st0" cx="217.8" cy="117.6" rx="27.3" ry="26.9" />
  <line id="freethrow_line_a" class="st0" x1="93.3" y1="144.5" x2="93.3" y2="90.8" />
  <line id="freethrow_line_b" class="st0" x1="342.4" y1="144.5" x2="342.4" y2="90.8" />
  <path id="freethrow_circle_a" class="st0" d="M93.3,90.8c15.1,0,27.3,12,27.3,26.9s-12.2,26.9-27.3,26.9" />
  <path id="freethrow_circle_b" class="st0" d="M342.4,144.5c-15.1,0-27.3-12-27.3-26.9s12.2-26.9,27.3-26.9" />
  <line id="freethrow_lane_line_a_left" class="st0" x1="93.3" y1="144.5" x2="4.6" y2="144.9" />
  <line id="freethrow_lane_line_a_right_dashes" class="st0" x1="4.4" y1="90.8" x2="93.8" y2="90.8" />
  <line id="freethrow_lane_line_b_left_dashes" class="st0" x1="431.1" y1="144.5" x2="342" y2="144.5" />
  <line id="freethrow_lane_line_b_right_dashes" class="st0" x1="430.6" y1="90.8" x2="342.2" y2="90.8" />
  <line id="basket_board_a" class="st0" x1="23.4" y1="131.1" x2="23.4" y2="104.2" />
  <line id="basket_board_b" class="st0" x1="412.3" y1="131.1" x2="412.3" y2="104.2" />
  <line id="basket_holder_a" class="st0" x1="23.4" y1="117.6" x2="27.9" y2="117.6" />
  <line id="basket_holder_b" class="st0" x1="412.3" y1="117.6" x2="407.7" y2="117.6" />
  <ellipse id="XMLID_27_" class="st0" cx="31.7" cy="117.6" rx="3.8" ry="3.7" />
  <ellipse id="basket_b" class="st0" cx="403.9" cy="117.6" rx="3.8" ry="3.7" />
  <path id="select_inside_area_a" class="st1" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" />
  <path id="select_threepoint_area_a" class="st1" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3
         v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" />
  <path id="select_inside_area_b" class="st1" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" />
  <path id="select_threepoint_area_b" class="st1" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4
         s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" />
</svg>
  </div>

如果我想添加一个'click'事件，应该在哪些路径上放置它？条件是活动的。 - Lukas Baliūnas
1
请看我的答案更新。（希望我对您的问题理解正确。） - Andrew Willems
谢谢，这甚至比我要求的还多 :) - Lukas Baliūnas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接