Geometry utilities for browsers that still need help
A lightweight polyfill for the CSSOM View geometry APIs. It adds
getBoxQuads(), convertQuadFromNode(),
convertRectFromNode(), and convertPointFromNode()
to Node so transformed layout geometry stays accessible outside Firefox.
npm i get-box-quads-polyfill
ESM
Transformed box geometry
Browsers expose getBoundingClientRect() widely, but that only gives you an
axis-aligned box. This library fills the gap by returning the four transformed corner points
for DOM nodes and by converting points, rectangles, and quads between node coordinate spaces.
Overlay rendering, design tools, drag handles, node connectors, hit targets, and any UI that needs to align with rotated, skewed, zoomed, or otherwise transformed content.
HTML support is the main target. SVG and MathML remain limited by browser layout APIs such as
missing offsetLeft and offsetTop on some element types.
import { addPolyfill } from "get-box-quads-polyfill";
addPolyfill(window);
const quad = document.querySelector(".target").getBoxQuads({
box: "border",
relativeTo: document.body,
});
console.log(quad[0].p1, quad[0].p2, quad[0].p3, quad[0].p4);Node.prototype.getBoxQuads(options)Node.prototype.convertQuadFromNode(quad, from, options)Node.prototype.convertRectFromNode(rect, from, options)Node.prototype.convertPointFromNode(point, from, options)useCache() and clearCache() for repeated calculations
The polyfill also accepts a non-standard iframes option for cross-frame embedding
scenarios where inner documents cannot see their containing iframe element directly.
Live demo
Loading demo…
[]