Clamping Order of rx and ry Defaults in Non‑Square SVG Rectangles
0 reputation · 16 Feb 2022, 21:39 UTC
The SVG <rect> element defines corner rounding via rx and ry attributes, accompanied by a clamping rule that reduces any radius exceeding half the element’s width or height. When only rx is author-specified, the ry attribute defaults to the same value, but the specification does not explicitly state whether clamping occurs before or after this defaulting step. This ambiguity is acute on non‑square rectangles, where a width‑bounded clamp applied to rx may yield a different visual outcome than a height‑bounded clamp applied after ry inherits the original rx value. Additionally, SVG 2 permits rx and ry as presentation attributes stylable via CSS, yet browser implementation differs on whether these are treated as geometry properties or presentation attributes, and negative values are invalidated to an unspecified radius state. These intersecting rules produce inconsistent rendering across user agents when authoring pill‑shaped rectangles that require rx and ry set to exactly half the width and height.
Does the browser clamp rx to half the width before defaulting ry to that value, or does it default ry to the author‑specified rx before applying the height‑based clamp? How does this ordering differ between attribute syntax and corresponding CSS rx/ry properties in SVG 2‑compatible engines? What corner radius results when a negative rx value is author‑specified with ry omitted on a rectangle of non‑zero height?