通过document.elementsFromPoint()搜索底层元素

请记住：svg <text>元素不能嵌套在<rects>这样的形状中-所以我们不能查询子元素。
document.elementsFromPoint()返回特定点坐标处的元素数组，所有主流浏览器都原生支持document.elementsFromPoint()-不需要snap.svg或其他库。
1.查询所有<text>元素
1.获取中心坐标：
let bb = label.getBoundingClientRect();
let x = bb.left + bb.width/2;
let y = bb.top + bb.height/2;
1.查找元素let els = document.elementsFromPoint(x, y)

let svg = document.querySelector('svg');
let labels = document.querySelectorAll('text');

labels.forEach(label => {
  let bb = label.getBoundingClientRect();
  let x = bb.left + bb.width / 2;
  let y = bb.top + bb.height / 2;
  // sanitize id string
  let id = label.textContent.replaceAll(' ', '-').replaceAll('#', '').toLowerCase();

  // filter only geometry elements
  let els = document.elementsFromPoint(x, y).filter(el => el instanceof SVGGeometryElement);

  // optional: select only first underlying element
  let onlyFirstUnderlying = false;
  if (onlyFirstUnderlying) {
    els = [els[0]];
  }
  els.forEach((el, i) => {
    el.id = id
    // add incremental suffix to prevent duplicate ids
    if (els.length > 1 && i > 0) {
      el.id += '_' + i
    }
  })
  let newSvg = new XMLSerializer().serializeToString(svg);
  output.value = newSvg;
})

svg {
  max-width: 10em;
  height: auto;
  border: 1px solid #ccc;
}

text {
  font-size: 10px
}

#output {
  display: block;
  width: 100%;
  min-height: 20em;
}

<svg id="svg" viewBox="0 0 100 100">
  <rect x="0" y="0" width="50" height="50" fill="yellow" />
  <text x="10" y="25">Label 01</text>
  <rect x="0" y="50" width="50" height="50" fill="orange" />
  <rect x="0" y="50" width="40" height="50" fill="purple" />
  <rect x="0" y="50" width="30" height="50" fill="pink" />
  <text x="10" y="75">Label 02</text>
</svg>
<h3>Output</h3>
<textarea id="output"></textarea>