createSvgArcPath function

Creates the d of an arc around the center of an element, in any group: the track of a gauge around its hub.

import { createSvgArcPath } from 'utils';

Signature

export function createSvgArcPath(target: SVGGraphicsElement, arc: SvgArc): string

Parameters

Name	Description
target	The element in whose coordinates the path is written, such as the <path> that receives it.
arc	The center element, the radius, the start angle and the opening.

Returns

The path data.

Errors

• Throws TypeError: When an element is not rendered.

Example

track.setAttribute('d', createSvgArcPath(track, { center: hub, radius: 40, startAngle: -135, sweepAngle: 270 }));

Tests

Line coverage: 100 %.

• ✅ draws from -90° over 180°
• ✅ draws from 0° over -270°
• ✅ draws from 0° over 360°
• ✅ centers on an element of another group
• ✅ only reads the target, without writing it

Source

src/svg-shape/create-svg-arc-path.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/create-svg-arc-path.ts imports, directly or not:

• src/math/round-to-fraction-digits.ts
• src/svg-shape/internal/create-arc-path.ts
• src/svg-shape/internal/format-coordinate.ts
• src/svg-shape/internal/format-point.ts
• 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 { createArcPath } from './internal';
import type { SvgArc } from './svg-arc';

/**
 * Creates the `d` of an arc around the center of an element, in any group: the track of a gauge around its
 * hub.
 *
 * @param target - The element in whose coordinates the path is written, such as the `<path>` that receives it.
 * @param arc - The center element, the radius, the start angle and the opening.
 * @returns The path data.
 * @throws {TypeError} When an element is not rendered.
 * @example
 * track.setAttribute('d', createSvgArcPath(track, { center: hub, radius: 40, startAngle: -135, sweepAngle: 270 }));
 */
export function createSvgArcPath(target: SVGGraphicsElement, arc: SvgArc): string {
  const center = getSvgAnchorPointIn(arc.center, 'center', target);
  return createArcPath(center, arc.radius, arc.startAngle, arc.startAngle + arc.sweepAngle);
}

Test file

import { createSvgArcPath } from './create-svg-arc-path';
import { renderSvg } from './testing';

describe(createSvgArcPath, () => {
  it.for([
    [-90, 180, 'M 10 50 A 40 40 0 0 1 90 50'],
    [0, -270, 'M 50 10 A 40 40 0 1 0 90 50'],
    [0, 360, 'M 50 10 A 40 40 0 1 1 50 90 A 40 40 0 1 1 50 10'],
  ] as const)('draws from %s° over %s°', ([startAngle, sweepAngle, expected]) => {
    const byId = renderSvg('<circle id="hub" cx="50" cy="50" r="5" /><path id="track" />');
    expect(createSvgArcPath(byId('track'), { center: byId('hub'), radius: 40, startAngle, sweepAngle })).toBe(expected);
  });

  it('centers on an element of another group', () => {
    const byId = renderSvg(
      '<g transform="translate(100 100)"><circle id="hub" r="5" /></g><g transform="scale(2)"><path id="track" /></g>',
    );
    expect(createSvgArcPath(byId('track'), { center: byId('hub'), radius: 10, startAngle: -90, sweepAngle: 180 })).toBe(
      'M 40 50 A 10 10 0 0 1 60 50',
    );
  });

  it('only reads the target, without writing it', () => {
    const byId = renderSvg('<circle id="hub" cx="50" cy="50" r="5" /><path id="track" />');
    createSvgArcPath(byId('track'), { center: byId('hub'), radius: 40, startAngle: 0, sweepAngle: 90 });
    expect(byId('track').hasAttribute('d')).toBe(false);
  });
});

Keywords: create, svg, arc, path, svg shapes, function