Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which browser returns the correct result for getBoundingClientRect of an SVG element?

Tags:

css

standards

svg

This SVG contains a rect which overflows the SVG element:

<svg id='svg' width='10' height='10'>
  <rect x='-10' y='-10' width='30' height='30'/>
</svg>

Chrome 28 and Opera 12 return a getBoundingClientRect() for the SVG element with a width and height of 10. Firefox 23 reports a width and height of 30. Which is correct?

JSFiddle

The relevant spec is CSSOM, which delegates to the SVG spec if the SVG element does not "have an associated CSS layout box". I haven't found a definition of "having an associated CSS layout box", but the correct result would seem to hinge on this definition, as getBBox returns a 30x30 rect in all browsers.

like image 351
John Avatar asked Nov 28 '25 17:11

John


1 Answers

This Firefox bug was fixed in Firefox 33. See bug 530985 for details.

like image 182
Robert Longson Avatar answered Dec 01 '25 12:12

Robert Longson



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!