javascript - 如何使用 javascript 选择矩形内的所有 SVG 元素

Question

我编写了一个通用的 javascript 库，用于创建各种类型的 SVG 图形(条形图、绘图、饼图等)。我还有来自 this post 的选取框选择代码效果很好。

现在我的 SVG 中有 x1、y1、x2、y2 坐标，并且正在寻找一种简单的方法来选择该选区中至少有 1 个像素的所有 SVG 元素。

对于只有点的绘图，这很容易实现，但我正在寻找一个适用于矩形、椭圆形和路径的简单通用解决方案。

Answer 1

这实际上只是部分答案，因为我可以向您展示如何在简单的情况下实现您的目标，但不是在您提出的所有场景中。

一个简单的解决方案是使用svgSvgElement.getIntersectionList。下面的代码演示了这一点。它展示了如何确定三个彩色三 Angular 形中的哪一个被选择矩形“击中”。但请注意，它不是确定哪些元素与选择矩形重叠，而是确定哪些元素边界框与选择矩形重叠。因此，下面的蓝色三 Angular 形被认为按预期重叠，红色三 Angular 形被认为不按预期重叠，但绿色三 Angular 形被认为重叠，不是因为三 Angular 形本身重叠，而是因为绿色虚线它周围的矩形确实如此。实际确定哪个形状本身与矩形重叠更为复杂，并且自古以来一直是令人烦恼的根源。

const qs = (selctr) => document.querySelector(selctr);

const svg   = qs('svg'   );
const green = qs('#green');
const blue  = qs('#blue' );
const red   = qs('#red'  );

const r = svg.createSVGRect();
r.x = 10;
r.y = 10;
r.width = 100;
r.height = 40;
const nodeList = svg.getIntersectionList(r, null);
const arr = Array.from(nodeList);
console.log('The following triangles "overlap" the black rectangle:');
console.log('green:', arr.indexOf(green) >= 0, '(?!)');
console.log('blue: ', arr.indexOf(blue ) >= 0);
console.log('red:  ', arr.indexOf(red  ) >= 0);

<svg>
  <g fill="none" stroke-width="1" stroke-dasharray="2" opacity="0.5">
    <rect x="25" y="10" width="100" height="40" stroke="black"/>
    <rect x="10" y="40" width="20" height="40" stroke="green" transform="translate(0)"/>
    <rect x="10" y="40" width="20" height="40" stroke="blue"  transform="translate(50)"/>
    <rect x="10" y="40" width="20" height="40" stroke="red"   transform="translate(120)"/>
  </g>
  <g opacity="0.5">
    <path id="green" fill="green" d="M10,40 L30,60 20,80" transform="translate(0)"/>
    <path id="blue"  fill="blue"  d="M10,40 L30,60 20,80" transform="translate(50)"/>
    <path id="red"   fill="red"   d="M10,40 L30,60 20,80" transform="translate(120)"/>
  </g>
</svg>

已经suggested that you could use document.elementFromPoint作为解决此问题的一种方法。例如，您可以测试选择矩形的四个 Angular 点或中心点是否落在您的形状内。但请注意，即使这种方法也会错过以下内容:

<svg>
  <rect x="10" y="10" width="50" height="50" fill="none" stroke="black" stroke-width="1" stroke-dasharray="2" opacity="0.5"/>
  <path fill="red" opacity="0.5" d="M45,30 L80,0 90,70"/>
</svg>