如何获取任何 SVG 元素的四个角坐标SVG 坐标？

如何解决如何获取任何 SVG 元素的四个角坐标SVG 坐标？

这甚至可能吗？我需要一个也可以在 IE 中使用的跨浏览器解决方案，所以 getBBox() 不是一个选项。是的，我需要这个解决方案主要能够计算其他 svg 转换所需的 svg 旋转原点和值；将大大促进我想做的事情。

说明我想做什么：

<svg viewBox="0 0 200 200">
<rect x="20" y="30" width="50" height="70" fill="white" stroke="black"/>
<circle cx="20" cy="30" r="2" fill="red"/>
<circle cx="70" cy="30" r="2" fill="red"/>
<circle cx="70" cy="100" r="2" fill="red"/>
<circle cx="20" cy="100" r="2" fill="red"/>
</svg>

我想要做的是获取 svg 中任何 svg 元素的四个红点的坐标。当然，对于 <rect> 这很容易（参见我的图），但我需要能够为 svg 中的 <text> 元素计算它，这可能是可变/不可预测的宽度和高度.除了将 getBBox() 方法应用到指定的 <text> 元素之外，我真的不知道如何做到这一点，但这在 IE 中不受支持。 我需要根据需要旋转相应的 <text> 元素，具有特定的旋转原点，我可以在知道这四个点的坐标的情况下进行计算。操作 text-anchor 不适合我的情况，因为我已经将其用于相应 <text> 元素的布局目的。

编辑

getBBox() 实际上在 IE 中是支持的，这里 canIUse 是错误的。但是像往常一样，当您认为问题已解决时，下一个问题就来了。当我的 svg 中有以下内容时：

<text id="my-text">
<tspan>line1</tspan>
<tspan>line2 which may be longer</tspan>
</text>

而且我想访问 tspans，我可以通过以下方式在 FF 中执行此操作：

document.getElementById( "my-text" ).children;

在 IE (IE11) 中，找到 document.getElementById( "my-text" )，而 document.getElementById( "my-text" ).children 返回 undefined？！这是正常的吗？我的意思是我可以为所有这些添加一个类，但是 IE 无法将 tspan 识别为子类，这仍然很奇怪。页面上的标记完全相同；我检查了检查员。如果我没记错的话，这与 SVG 被解析为 XML 有关系吗？

看起来这其实很正常，IE 无法通过 children 访问 SVG 元素的 DOM 子元素：See this