如何从SVG路径获取边界坐标

Question

I'm working on a project that requires bounding draggable elements inside complex shapes, defined ideally by SVG Path elements, using Javascript.

I'm open to other ways of defining the bounds but SVG would tie in better with the source material.

I've tried using pathSegList however this returns undefined, and I've read it's deprecated.

How would I go about getting a list of coordinates from an SVG path element, which I could translate to X/Y coordinates for Javascript?

Answer 1

You can use the .getBBox() method on the path element. Take a look at the snippet:

 console.log(document.getElementById('mypath').getBBox()); 

 <svg width="300" height="100" viewBox="0 0 300 100" style="background:#efefef"> <path id="mypath" d="M20,20 L40,20 40,40, 20,40 Z" fill="red" /> </svg>