Skip to content

pathBounds

Computes the exact bounding box of an SVG path string with no DOM involved, evaluating the true extrema of each Bézier and arc segment (not a sampled approximation). Returns {x, y, width, height}, or a zero-size box at the origin for an empty/unparseable path.

Arc commands are handled too: the box reaches the top of the semicircle even though neither endpoint is there. Server-side rendering uses this to size <path> output without a browser.

import {pathBounds} from "@d3plus/math";

pathBounds("M 40 120 A 70 70 0 0 1 180 120");

The exact bounding box of a path, computed from the true extrema of each curve rather than from its control points or a sampled approximation, with no DOM involved. The control points of this Bézier sit at y = 10, but the curve itself never gets that high, and the box reflects the curve.

import {pathBounds} from "@d3plus/math";

pathBounds("M 30 150 C 90 10, 170 10, 230 150");

Parameters

import {pathBounds} from "@d3plus/math";
drequiredstring

An SVG path string (the d attribute of a <path>).