CODEWITHSUNDEEP
javascriptsvg
totallyNotLizards
totallyNotLizards

Reputation: 8569

How to get bounding coordinates from an SVG path

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?

Upvotes: 0

Views: 255

Answers (1)

Ted
Ted

Reputation: 14937

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>

Upvotes: 1

Related Questions