Do browsers treat negative width on SVG <rect> as zero or as an error for geometry APIs?
0 reputation · 24 Sept 2025, 00:39 UTC
When an SVG element receives a negative width or height value, the SVG 2 specification marks the value as an error and states the shape should not render. In practice, implementations differ on whether the element remains in the DOM with a zero-size geometry box or is treated as an erroring element that geometry and hit-testing APIs ignore.
The distinction matters for scripts that call getBBox(), getTotalLength(), or attach pointer-event listeners, because a zero-area rect still returns a valid DOMRect and can receive events, while an errored element may return an empty box or throw. CSS geometry properties (width, height as CSS) add another layer: a negative CSS length is invalid at parse time, but a negative presentation attribute may be handled differently by the SVG layout engine.
Which browsers clamp negative width/height to zero and keep the element in the geometry tree? Does getBBox() return a zero-area rectangle or an empty rectangle in each engine? Are pointer events dispatched on a rect with negative size in Chrome, Firefox, and Safari?