Get width height of SVG element

Question

What is the proper way to get the dimensions of an svg element   http   jsfiddle net langdonx Xkv3X   Chrome 28   style x client 300x100 offset 300x100   IE 10   stylex  client300x100  offsetundefinedxundefined    FireFox 23    style   x   client   0x0   offset   undefinedxundefined    There are width and height properties on svg1  but  width baseVal value is only set if I set the width and height attributes on the element     The fiddle looks like this   HTML   lt svg id  svg1  xmlns  http   www w3 org 2000 svg  version  1 1  gt       lt circle cx  50  cy  50  r  40  stroke  black  stroke-width  1  fill  red    gt       lt circle cx  150  cy  50  r  40  stroke  black  stroke-width  1  fill  green    gt       lt circle cx  250  cy  50  r  40  stroke  black  stroke-width  1  fill  blue    gt   lt  svg gt    JS  var svg1   document getElementById  svg1     console log svg1   console log  style   svg1 style width    x    svg1 style height   console log  client   svg1 clientWidth    x    svg1 clientHeight   console log  offset   svg1 offsetWidth    x    svg1 offsetHeight     CSS   svg1       width  300px      height  100px

User · Accepted Answer

Use getBBox function  http   jsfiddle net Xkv3X 1   var bBox   svg1 getBBox    console log  XxY   bBox x    x    bBox y   console log  size   bBox width    x    bBox height

User · Answer

I m using Firefox  and my working solution is very close to obysky  The only difference is that the method you call in an svg element will return multiple rects and you need to select the first one    var chart   document getElementsByClassName  chart   0   var width   chart getClientRects   0  width  var height   chart getClientRects   0  height

User · Answer

A save method to determine the width and height unit of any element  no padding  no margin  is the following   let div     document querySelector  div    let style   getComputedStyle div    let width    parseFloat style width replace  px         let height   parseFloat style height replace  px

User · Answer

FireFox have problemes for getBBox    i need to do this in vanillaJS   I ve a better Way and is the same result as real svg getBBox   function    With this good post   Get the real size of a SVG G element  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

User · Answer

SVG has properties width and height  They return an object SVGAnimatedLength with two properties  animVal and baseVal  This interface is used for animation  where baseVal is the value before animation  From what I can see  this method returns consistent values in both Chrome and Firefox  so I think it can also be used to get calculated size of SVG

User · Answer

From Firefox 33 onwards you can call getBoundingClientRect   and it will work normally  i e  in the question above it will return 300 x 100    Firefox 33 will be released on 14th October 2014 but the fix is already in Firefox nightlies if you want to try it out

User · Answer

This is the consistent cross-browser way I found   var heightComponents     height    paddingTop    paddingBottom    borderTopWidth    borderBottomWidth        widthComponents     width    paddingLeft    paddingRight    borderLeftWidth    borderRightWidth     var svgCalculateSize   function  el         var gCS   window getComputedStyle el      using gCS because IE8- has no support for svg anyway         bounds                 width  0              height  0                 heightComponents forEach function  css             bounds height    parseFloat gCS css                widthComponents forEach function  css            bounds width    parseFloat gCS css                return bounds

[javascript] Get width/height of SVG element

Examples related to javascript

Examples related to svg