在Safari中获取路径的不当边界

Question

实际上，我想在路径上打一个选择框。

要创建该框，我需要找到该路径的实际边界，但是 我只在Safari上遇到不适当的限制。我正在使用的地方 getScreenCTM()的{​​{1}}功能。我也试过 使用d3.select("path").node()函数，但是之后给出错误结果 缩放或平移主getBBox()。

SVG

let section  = d3.select("path");
d3.select("#boundingClientRect").on("click", () => {
	let bounding = section.node().getBoundingClientRect();
  d3.select('rect').remove()
  d3.select("svg").append('rect')
    .attr('x', bounding.top)
    .attr('y', bounding.left)
    .attr('fill', '#ff45455a')
    .attr('stroke-width', 2)
    .attr('width', bounding.width)
    .attr('height', bounding.height)
  
})

d3.select("#screenCTM").on("click", () => {
	let bounding = section.node().getBoundingClientRect();
  let screenCTM = section.node().getScreenCTM();
  Object.defineProperty(bounding, 'bottom', {
    value: (bounding.top - section.node().getScreenCTM().f + section.node().getCTM().f) + bounding.height
  });
  Object.defineProperty(bounding, 'top', {
    value: (bounding.top - section.node().getScreenCTM().f + section.node().getCTM().f)
  });
  d3.select('rect').remove()
  d3.select("svg").append('rect')
    .attr('x', bounding.top)
    .attr('y', bounding.left)
    .attr('fill', '#ff45455a')
    .attr('stroke-width', 2)
    .attr('width', Math.abs(bounding.right - bounding.left))
    .attr('height', Math.abs(bounding.top - bounding.bottom))
  
})

#tool{
  position:fixed;
  left:20px;
  top:20px;
}

您能帮我解决一下吗？