Home/ Questions/Q 8524223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:37:43+00:00

I noticed inconsistent between bounding boxes of shapes between browsers. I made SVG containing

  • 0

I noticed inconsistent between bounding boxes of shapes between browsers. I made SVG containing this:

<rect x="100" y="100" width="100" height="100" id="rect" fill="gray" stroke="black" stroke-width="2px" />
<path d="M100 100 L100 200 L200 200 L200 100 z" id="path" fill="red" stroke="white" stroke-width="2px"/>

When I trying to get their bounding boxes (element.getClientBoundingBox) on Chrome and IE the sizes are w=100, h=100 and their positions are x=100,y=100 for both shapes.
But on FireFox for the first shape I am getting w=102,h=102 (size + borders) and x=99,y=99.
On path the values are even more strange – w=116,h=116, x=92,y=92.

Is this a Firefox bug – should be posted to Bugzilla? Do SVG specification says anything about that? (I could not find any information related to this).
Have any one know about any way of working around this problem? Especially path element is kind of unpredictable for me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Firefox includes the stroke in the bounding box. We have asked for the specification to change to reflect that this is correct.

    For paths the size is too large because we don’t do a very good job of working out the actual size of the stroked shape because of the complexity of estimating the size for pointy shapes. We use stroke-miterlimit to give an upper limit but it’s not that great.

    You could use the SVG DOM getBBox method, that excludes the shape’s stroke and just gives you the fill dimensions.

    • 0