SVG 是一种矢量图形格式，它使用 XML 描述二维图形和动画。在前端开发中，我们经常需要操作 SVG 图形，并且需要获取 SVG 元素的坐标来进行各种计算。本文将介绍几种获取 SVG 元素坐标的方法，并提供示例代码。
1. 使用 getBoundingClientRect() 方法
getBoundingClientRect() 是浏览器原生提供的方法，用于获取元素的位置和尺寸信息。对于 SVG 元素，可以直接调用该方法获取其相对于视口的坐标。
const svgElement = document.querySelector('svg')
const rect = svgElement.getBoundingClientRect()
const x = rect.x
const y = rect.y上面的代码中，我们首先通过 querySelector() 方法获取 SVG 元素，然后调用 getBoundingClientRect() 方法获取元素的位置信息。最后，我们可以从返回的 DOMRect 对象中获取 x 和 y 属性，即为 SVG 元素的坐标。
需要注意的是，由于 SVG 元素通常是嵌套在 HTML 文档中的，因此要确保获取到的位置信息是相对于视口而非页面的。
2. 使用 getCTM() 方法
在 SVG 中，每个元素都有一个 transform 属性，用于指定其变换矩阵。如果 SVG 元素没有任何变换，则该属性为单位矩阵。通过 getCTM() 方法，我们可以获取 SVG 元素的当前变换矩阵，并据此推算出元素的坐标。
const svgElement = document.querySelector('svg')
const ctm = svgElement.getCTM()
const x = ctm.e
const y = ctm.f上面的代码中，我们首先获取 SVG 元素，然后调用 getCTM() 方法获取其当前的变换矩阵。最后，我们从返回的 SVGMatrix 对象中获取 e 和 f 属性，即为 SVG 元素的坐标。
需要注意的是，由于 getCTM() 方法返回的是当前的变换矩阵，因此若 SVG 元素存在父级元素并且其父级元素有变换，则需要根据父级元素的变换矩阵进行修正。
3. 使用 createSVGPoint() 方法
在 SVG 中，使用 SVGPoint 对象来表示二维平面上的点。可以使用 createSVGPoint() 方法创建一个新的 SVGPoint 对象，并调用其 matrixTransform() 方法将其坐标转换到某个坐标系下。
const svgElement = document.querySelector('svg')
const point = svgElement.createSVGPoint()
point.x = 100
point.y = 50
const transformedPoint = point.matrixTransform(svgElement.getScreenCTM().inverse())
const x = transformedPoint.x
const y = transformedPoint.y上面的代码中，我们首先获取 SVG 元素，然后使用 createSVGPoint() 方法创建一个新的点对象，并设置其坐标值。接着，我们调用 getScreenCTM() 方法获取 SVG 元素的变换矩阵，并取其逆矩阵，将点对象的坐标转换到 SVG 坐标系下。最后，我们从转换后的点对象中获取 x 和 y 属性，即为 SVG 元素的坐标。
需要注意的是，该方法相对于前两种方法更加灵活，可以根据实际需求进行计算。
结语
本文介绍了三种获取 SVG 元素坐标的方法，并提供了示例代码。这些方法有各自的优缺点，需要根据具体的场景进行选择。希望本文能够对读者在前端开发中操作 SVG 图形时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28939