Question

我做了一个篮球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>

Answer 1

我复制了你的内心＆＃34;和＆＃34;三点＆＃34;区域。对于一组我离开了他们的身份。对于另一组我预先＆＃34;选择_＆＃34;到了身份证。拥有这两个集合允许我将悬停目标与颜色目标分开。（你应该动态地重复这种复制，特别是对于更复杂的图形，但是这种手动复制足以证明这种技术。）

我把原件放在＆＃34;底部＆＃34; svg堆栈元素（即靠近svg代码的开头），以便着色它们不会隐藏任何黑线。（请注意，我必须稍微重新排列这些，以便在着色时，三个点区域不会覆盖内部区域。）但是，我将重复的设置放在＆＃34;顶部＆＃34; svg堆栈（即靠近svg代码的末尾），以便悬停目标位于最顶层。

然后我隐藏了所有重复的元素，即发出悬停事件的元素，这样最初就不会检测到悬停。当点击一个团队的按钮时，只有一个可以在内部＆＃34;内部＆＃34;区域和一个可挽救的＆＃34;三点＆＃34;该团队的区域是“＃34;可见＆＃34;。这些仍然是观众看不到的（填充总是透明的）但是＆＃34;可见＆＃34;现在是悬停目标（可见性从隐藏变为可见）。因此，根据选择的团队，悬停目标基本上是交换的。请注意，所有目标的可恢复性始终保持不变。只是在4个中只有2个在任何时间点都可以看到，因而真正可以随时可用。

包含双嵌套forEach循环的代码只是设置所有jQuery悬停事件的简洁方法。

更新：您询问了要点击的区域。我更新了代码，以显示相应的目标是那些id为＆＃34;选择_＆＃34;的目标。我通过点击主场或客队的2分或3分区域来实现简单的游戏分数，从而获得了有趣的演示。

＆＃13;

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');
});

＆＃13;

svg {
  height: 100%;
}
.st0 {
  fill: none;
  stroke: #010101;
  stroke-width: 3;
}
.st1 {
  fill: transparent;
  visibility: hidden;
}

＆＃13;

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

＆＃13;

根据变量重叠svg路径事件

1 个答案: