javascript – 根据变量重叠svg路径事件

2024年1月8日 132次阅读

我做了一个篮球svg球场.在这个svg中有两条对我有用的重要路径：带有#threepoint_area_b的#inside_area_a和带有#threepoint_area_b的#inside_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>

最佳答案 我复制了你的“内部”和“三点”区域.对于一组我离开了id的原样.对于另一组,我将“select_”添加到id上.拥有这两个集合允许我将悬停目标与颜色目标分开. (你应该动态地进行这种复制,特别是对于更复杂的图形,但是这种手动复制足以证明这种技术.)

我把原件放在svg堆栈元素的“底部”(即靠近svg代码的开头),这样它们着色就不会隐藏任何黑线. (注意,我必须稍微重新排列这些,以便在着色时,三个点区域不会覆盖内部区域.)但是,我将重复的设置放在svg堆栈的“顶部”(即接近结束时) svg代码)这样​​悬停目标就是最顶层的.

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

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

更新：您询问了要点击的区域.我更新了代码,以显示适当的目标是那些id为“select_”的目标.我玩得很开心,通过点击主场或客队的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>
点赞