getSvgArcPoint function

Finds a point along an arc, in the coordinates of an element of any group: where to put the label of a graduation or a marker.

import { getSvgArcPoint } from 'utils';

Signature

export function getSvgArcPoint(target: SVGGraphicsElement, arc: SvgArc, ratio: number): DOMPoint

Parameters

Name	Description
target	The element whose coordinates are wanted, such as the <g> of the labels.
arc	The center element, the radius, the start angle and the opening.
ratio	The position along the arc: 0 at the start, 1 at the end.

Returns

The point, in the coordinates of target.

Errors

• Throws TypeError: When an element is not rendered.

Example

const { x, y } = getSvgArcPoint(labels, { ...arc, radius: 28 }, index / 6);

Tests

Line coverage: 100 %.

• ✅ finds a point along the arc

Source

src/svg-shape/get-svg-arc-point.ts (on GitHub)

Uses

• 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.
• SvgArc: An arc around the center of an element, for createSvgArcPath and its siblings (0° up, clockwise).

Files it needs

src/svg-shape/get-svg-arc-point.ts imports, directly or not:

• src/svg-shape/internal/polar-to-cartesian.ts
• src/svg-shape/svg-arc.ts
• src/svg-transform/anchor.ts
• src/svg-transform/get-svg-anchor-point-in.ts
• src/svg-transform/get-svg-anchor-point.ts
• src/svg-transform/internal/get-anchor-point.ts
• src/svg-transform/internal/get-screen-matrix.ts

Source code

import { getSvgAnchorPointIn } from '../svg-transform';
import { polarToCartesian } from './internal';
import type { SvgArc } from './svg-arc';

/**
 * Finds a point along an arc, in the coordinates of an element of any group: where to put the label of a
 * graduation or a marker.
 *
 * @param target - The element whose coordinates are wanted, such as the `<g>` of the labels.
 * @param arc - The center element, the radius, the start angle and the opening.
 * @param ratio - The position along the arc: 0 at the start, 1 at the end.
 * @returns The point, in the coordinates of `target`.
 * @throws {TypeError} When an element is not rendered.
 * @example
 * const { x, y } = getSvgArcPoint(labels, { ...arc, radius: 28 }, index / 6);
 */
export function getSvgArcPoint(target: SVGGraphicsElement, arc: SvgArc, ratio: number): DOMPoint {
  const center = getSvgAnchorPointIn(arc.center, 'center', target);
  return polarToCartesian(center, arc.radius, arc.startAngle + arc.sweepAngle * ratio);
}

Test file

import { getSvgArcPoint } from './get-svg-arc-point';
import { renderSvg } from './testing';

describe(getSvgArcPoint, () => {
  it('finds a point along the arc', () => {
    const byId = renderSvg('<circle id="hub" cx="50" cy="50" r="5" /><g id="labels"><rect width="1" height="1" /></g>');
    const point = getSvgArcPoint(
      byId('labels'),
      { center: byId('hub'), radius: 40, startAngle: -90, sweepAngle: 180 },
      0.5,
    );
    expect(point.x).toBeCloseTo(50, 6);
    expect(point.y).toBeCloseTo(10, 6);
  });
});

Keywords: get, svg, arc, point, svg shapes, function