Home svg bbox() always returns a value where x and y are 0 when they shouldn't be

# svg bbox() always returns a value where x and y are 0 when they shouldn't be

itcropper
1#
itcropper Published in 2017-12-07 23:24:09Z
 I'm using SVG.js to draw shapes. One of the shapes needs to be a circle with a radius line so so get that behavior, I'm using an ellipse and a line inside of a "g" element. The trouble is, whenever I reference that g element and try to get the bbox, I always get a value like this: { x: 0, y: 0, width: widthOfBox, height: heightOfBox, cx: widthOfBox/2, cy: heightOfBox/2 }  x and y should NOT be 0. Below is the element in question that is clearly not at (0,0) but seems to be reporting that it is.   Is there a way to define the values that bbox should have? Or a way to set the values that bbox() looks at?
withrp
2#
 Because your  positioned relative to 
 From W3 specs on getBBox SVGRect getBBox() Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects). [...] Emphasis mine As you can see in this definition, the SVGRect returned by getBBox is calculated against the contained graphics elements, this means that the translation you applied on your  element will not be taken into account in this SVGRect, since the transformation is applied on the element itself, and not on its graphic content. You could get these x and y values by wrapping your transformed  element inside an other  from which you would call its getBBox() method, console.log(document.getElementById("wrapper").getBBox());  or even on the parent