如何访问内部 SVG 元素的偏移量

Question

我有一些 SVG 文件，我会使用标签将数百个这些 SVG 文件放在 HTML DOM 中。 SVG 文件包含内部元素，例如 .如何访问这些内部元素的偏移量？这是一个示例 SVG 文件的内容：https://jsbin.com/tapedam/edit?html,output。

访问偏移量对我有何帮助？

通过访问偏移量，我将能够维持与其他 SVG 对象的连接，即使它们被移动到 DOM 中的任何位置。

谢谢， 阿伦

Answer 1

获取对您感兴趣的元素的 DOM 引用，然后您可以调用以下函数之一：

getBBox()

返回元素在本地 SVG 坐标中的边界框。请注意，对元素或其祖先的任何变换都会影响返回的坐标值。

getBoundingClientRect()

返回元素在浏览器坐标中的边界框。但是请注意，这些坐标可能无法直接用于创建新的 SVG 元素。这是因为 SVG 可能具有不同的比例，或者元素可能具有变换。

如果你需要在本地SVG坐标和屏幕坐标之间进行转换，那么有functions for that also。