getSvgAnchorPoint function

Finds an anchor of the box an SVG element takes on screen: a corner, the middle of a side or the center.

import { getSvgAnchorPoint } from 'utils';

Signature

export function getSvgAnchorPoint(element: SVGGraphicsElement, anchor: Anchor = 'center'): DOMPoint

Parameters

Name	Description
element	A rendered SVG element.
anchor	The point, such as 'top-right'. Defaults to 'center'.

Returns

The point, in screen pixels.

Example

getSvgAnchorPoint(symbol, 'top-right'); // DOMPoint { x: 220, y: 92 }

Tests

Line coverage: 100 %.

• ✅ finds the top-left anchor
• ✅ finds the top-right anchor
• ✅ finds the bottom anchor
• ✅ finds the center anchor
• ✅ takes the center by default

Source

src/svg-transform/get-svg-anchor-point.ts (on GitHub)

Uses

• Anchor: One of the 9 points of a box: its corners, the middles of its sides, its center.

Used by

• getSvgAnchorPointIn: Finds an anchor of an element as seen on screen, in the coordinates of another element, whatever groups lie between: the center of a hub for the setRotate of a needle drawn in another group.
• svgFlipTo: An order of applySvgTransforms that makes the element mirrored or not, as seen on screen, around one of its anchors: svgFlipTo(false) makes a mirrored text readable again.
• svgPlaceOn: An order of applySvgTransforms that moves the element so that one of its anchors lands on an anchor of another element, as seen on screen, whatever groups each one is in.
• svgRotateBy: An order of applySvgTransforms that turns the element by an angle from its position before this order, clockwise on screen, around an anchor of itself or of another element: set(90) after set(3) gives 90° from the start, not 93°.
• svgRotateTo: An order of applySvgTransforms that turns the element to an absolute angle on screen, clockwise from upright, around an anchor of itself or of another element: svgRotateTo(0) straightens it.

Files it needs

src/svg-transform/get-svg-anchor-point.ts imports, directly or not:

• src/svg-transform/anchor.ts
• src/svg-transform/internal/get-anchor-point.ts

Source code

import type { Anchor } from './anchor';
import { getAnchorPoint } from './internal';

/**
 * Finds an anchor of the box an SVG element takes on screen: a corner, the middle of a side or the center.
 *
 * @param element - A rendered SVG element.
 * @param anchor - The point, such as `'top-right'`. Defaults to `'center'`.
 * @returns The point, in screen pixels.
 * @example
 * getSvgAnchorPoint(symbol, 'top-right'); // DOMPoint { x: 220, y: 92 }
 */
export function getSvgAnchorPoint(element: SVGGraphicsElement, anchor: Anchor = 'center'): DOMPoint {
  return getAnchorPoint(element.getBoundingClientRect(), anchor);
}

Test file

import { getSvgAnchorPoint } from './get-svg-anchor-point';
import { renderSvg } from './testing';

describe(getSvgAnchorPoint, () => {
  it.for([
    ['top-left', 10, 20],
    ['top-right', 110, 20],
    ['bottom', 60, 70],
    ['center', 60, 45],
  ] as const)('finds the %s anchor', ([anchor, x, y]) => {
    const byId = renderSvg('<rect id="box" x="10" y="20" width="100" height="50" />');
    expect(getSvgAnchorPoint(byId('box'), anchor)).toMatchObject({ x, y });
  });

  it('takes the center by default', () => {
    const byId = renderSvg('<rect id="box" x="10" y="20" width="100" height="50" />');
    expect(getSvgAnchorPoint(byId('box'))).toMatchObject({ x: 60, y: 45 });
  });
});

Keywords: get, svg, anchor, point, svg transforms, function