Question

54

Get the real size of a SVG/G element

rated 0 times [ 57] [ 3] / answers: 1 / hits: 23743 / 12 Years ago, fri, march 23, 2012, 12:00:00

Is there any accurate way to get the real size of a svg element that includes stroke, filters or other elements contributing to the element's real size from within Javascript?

I have tried pretty much everything coming to my mind and now I feel I'm coming to a dead end :-(

Updated question to add more context (Javascript)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taylert

Add To Favorites

Follow

Total Points: 627

Total Questions: 91

Total Answers: 108

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

taylert questions

1 How to format date in v-Calendar?

Tue, Jul 28, 20, 00:00, 4 Years ago

1 Check if at least two elements in an array are greater than zero - JavaScript/Typescript

Mon, Feb 17, 20, 00:00, 4 Years ago

1 How do a date range validation with vue/Quasar

Tue, Dec 10, 19, 00:00, 5 Years ago

1 JavaScript: When to use a Class vs. a prototype?

Fri, Sep 13, 19, 00:00, 5 Years ago

1 Is there a generic way to set state in React Hooks? How to manage multiple states?

Tue, Jul 9, 19, 00:00, 5 Years ago

View All

answered 12 Years ago xochitl · Accepted Answer

You can't get the values directly. However, you can get the dimensions of the bounding rectangle:

var el   = document.getElementById("yourElement"); // or other selector like querySelector()

var rect = el.getBoundingClientRect(); // get the bounding rectangle



console.log( rect.width );

console.log( rect.height);

It is supported at least in the actual versions of all major browser.

Get the real size of a SVG/G element

Answers

Check fiddle

taylert