SVG DOM & JavaScript API Glossary: 45+ Methods, Interfaces & Geometry Types

Returns the Current Transformation Matrix (CTM) mapping local SVG user coordinates directly to device screen pixels. Invaluable for mapping client pointer events (e.clientX, e.clientY) to exact vector coordinates.

const ctm = svgElement.getScreenCTM();
const pt = new DOMPoint(event.clientX, event.clientY);
const svgCoords = pt.matrixTransform(ctm.inverse());
console.log(`X: ${svgCoords.x}, Y: ${svgCoords.y}`);

Returns the transformation matrix mapping local element coordinate space to its nearest ancestor viewport coordinate space (typically the root <svg>).

const localMatrix = childGroup.getCTM();
console.log(`Scale X: ${localMatrix.a}, Translate X: ${localMatrix.e}`);

Modern web standard representing 2D and 3D affine transformation matrices. Supports hardware-accelerated matrix multiplication, inversion, translation, and rotation.

const matrix = new DOMMatrix()
  .translate(100, 50)
  .rotate(45)
  .scale(1.5);
element.style.transform = matrix.toString();

Represents an immutable or mutable 2D/3D coordinate vector (x, y, z, w). Replaces legacy svg.createSVGPoint() in modern browsers.

const pt = new DOMPoint(24, 48);
const transformed = pt.matrixTransform(matrix);

Creates a detached SVGPoint initialized at (0, 0). While supported in all browsers, new DOMPoint() is preferred in modern codebases.

const pt = svg.createSVGPoint();
pt.x = mouseX;
pt.y = mouseY;

Multiplies the point coordinates by a specified 2D/3D matrix, returning a new transformed point object.

const localPoint = screenPoint.matrixTransform(svg.getScreenCTM().inverse());

A sequence of SVGTransform items governing an element's transform attribute. Provides indexed item access and methods like appendItem() and consolidate().

const transformList = element.transform.baseVal;
const translateTransform = svg.createSVGTransform();
translateTransform.setTranslate(20, 40);
transformList.appendItem(translateTransform);

Creates an SVGTransform object wrapping an existing affine matrix.

const transform = svg.createSVGTransformFromMatrix(customDOMMatrix);
element.transform.baseVal.initialize(transform);

Computes the tight bounding box containing the element's rendered geometry in current user coordinate space. Ignores external CSS transforms and stroke width by default.

const bbox = pathElement.getBBox();
console.log(`x: ${bbox.x}, y: ${bbox.y}, width: ${bbox.width}, height: ${bbox.height}`);

Returns the total path length in user space units. Fundamental for CSS path drawing animations using stroke-dasharray and stroke-dashoffset.

const length = path.getTotalLength();
path.style.strokeDasharray = `${length}`;
path.style.strokeDashoffset = `${length}`;

Calculates the (x, y) coordinates along a path trajectory at a specified distance from the origin. Used for particle path follow animations and motion path positioning.

const midPoint = path.getPointAtLength(length * 0.5);
marker.setAttribute('cx', midPoint.x);
marker.setAttribute('cy', midPoint.y);

Determines whether a DOMPoint or user-space coordinate is inside the element's filled shape area according to its fill-rule.

const isHit = shape.isPointInFill(new DOMPoint(120, 85));

Determines whether a point falls within the stroke width outline of the geometry element.

const onBorder = shape.isPointInStroke(new DOMPoint(120, 85));

The abstract base interface for all SVG shape elements that have a geometric outline. Exposes getTotalLength(), getPointAtLength(), and hit-testing methods.

Reflects the author-defined pathLength attribute, allowing manual calibration of stroke dash calculations.

path.pathLength.baseVal = 100; // Calibrate path to 0-100 scale

The DOM interface for root <svg> elements, providing viewport control, animation state, and matrix instantiation factories.

Provides direct read/write access to the root element's viewBox min-x, min-y, width, and height values.

const vb = svg.viewBox.baseVal;
vb.x -= 10; // Pan left
vb.width *= 1.1; // Zoom out

Gets or sets the current zoom factor applied to the root SVG canvas.

svg.currentScale = 2.0; // Zoom canvas to 200%

Gets or sets the current panning translation coordinates on the root SVG viewport.

svg.currentTranslate.x += 25;
svg.currentTranslate.y += 10;

Governs how the SVG graphic aligns and scales when aspect ratios differ between viewBox and container.

svg.preserveAspectRatio.baseVal.align = SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;

Suspends all SMIL animations (e.g. <animate>, <animateTransform>) running within the SVG fragment.

svg.pauseAnimations();

Resumes SMIL animations from their current paused offsets.

svg.unpauseAnimations();

Returns true if SMIL animations are currently suspended in the document.

if (svg.animationsPaused()) svg.unpauseAnimations();

Returns the elapsed animation timeline time in seconds since SVG document initialization.

const elapsed = svg.getCurrentTime();

Scrubs the SMIL animation timeline to an exact timestamp, updating all animated vectors immediately.

svg.setCurrentTime(2.5); // Seek to 2.5 seconds