javascript - 根据变量重叠 svg 路径事件-6ren

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

转载作者：搜寻专家更新时间：2023-10-31 08:52:13

我制作了一个篮球场 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>

最佳答案

我复制了你的“内部”和“三点”区域。对于一组，我保留了 id 的原样。对于另一组，我在 id 前面加上了“select_”。有了这两组，我就可以将悬停目标与颜色目标分开。 (您可能应该动态地执行此复制，尤其是对于更复杂的图形，但此手动复制足以演示该技术。)

我将原件放在 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>

关于javascript - 根据变量重叠 svg 路径事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39184225/

文章推荐： javascript - 通过javascript禁用表单组输入

文章推荐： javascript - CSS active伪类改变状态吞噬onclick事件

文章推荐： HTML/CSS 列表图像问题

文章推荐： javascript - 在 html 对象中显示加载 gif

svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
svg - 如何将一个 SVG 元素的内容复制到另一个 SVG 元素并保持同步
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作图标化表示(小) SVG1 的版本，非常小，但
svg - 如何在 svg 文档中以编程方式创建 svg 元素？
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。但是，这种方法似乎不适用
svg - 我正在尝试使用 flutter svg，但加载黑色 svg
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
svg - 为什么将
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
svg - 如何将 svg 代码保存为 .svg 图像？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
svg - 在另一个 SVG 元素中响应地居中 SVG 元素？
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
svg - 我如何将一个 SVG 置于另一个 SVG 中
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
svg - 用另一个 SVG 形状填充 SVG 形状
是否可以使用一个 SVG 形状作为另一个形状的填充？最佳答案您想使用 SVG Pattern .见 this example : 注意
svg - SVG 中跨路径的渐变
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
svg - 如何将形状优美的多边形转换为 SVG？
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)
我使用 require 的 SVG 没有显示。在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
svg - SVG 中的混合模式
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
svg - SVG 支持多少级递归？
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
svg - svg 中的剪辑路径和变换组合
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。问题是什么？为什么
svg - svg 形状中的文本区域
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？代码: var graph = new joint.dia.Graph;
svg - svg 动画可以在不丢失累积信息的情况下暂停吗？
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
svg - SVG、多条小路径和一条大路径哪个更有效？
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？我正在考虑将某种动画从一张图片变成一张完全不同
svg - SVG 中的海龟图形？
logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。我的解决方案应该适用于 FOCS(Firefo
svg - SVG 图案中使用的圆帽线
目前正在使用 SVG 元素与一堆元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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