clientToSvgPoint

Converts a pointer position in client coordinates to the SVG's user coordinates, or returns null when the SVG is not mounted.

@internote/canvas-sdkFunction
On this page
import { clientToSvgPoint } from '@internote/canvas-sdk';

The inverse of the SVG's screen transform, so the answer is right whatever the viewBox, the CSS size or the transforms above it. What a surface calls in a pointer handler before asking its own scale what data point the reader is over.

#Signature

(svg: SVGSVGElement | null, clientX: number, clientY: number): {
    x: number;
    y: number;
} | null

#Parameters

svg
The SVG element, or null before it has mounted.
clientX
The pointer's clientX.
clientY
The pointer's clientY.

#Returns

The point in the SVG's user coordinate system, or null.

#Example

onPointerMove={(event) => {
    const at = clientToSvgPoint(svgRef.current, event.clientX, event.clientY);
    if (at) setCursor(scale.invert(at.x, at.y));
}}

Declared in packages/canvas-sdk/src/geometry/svg.ts:31.

Last updated