CODEWITHSUNDEEP
javascriptjquerysvg
Gaurav
Gaurav

Reputation: 8487

How to access the height and width of path element?

I have an svg path element. I want to access the height, width, x and y of the path element and after changing it want to set it back 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

How can i do this?

Upvotes: 1

Views: 3326

Answers (2)

Robert Longson
Robert Longson

Reputation: 124229

You can get the bounding box by calling getBBox() so give the path an id attribute e.g. id="path1" and then in a script write

var bbox = document.getElementById("path1").getBBox();

bbox will have x, y, width and height attributes but you can't change them directly.

Upvotes: 3

Mazz
Mazz

Reputation: 1879

Since I am a fan of livesnippets:

var bbox = document.getElementById("path1").getBBox();

console.log(bbox);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" id="path1"/>
</svg>

Upvotes: 0

Related Questions