svgTranslateBy function

An order of applySvgTransforms that moves the element along its own axes, in its own units: turned by 90°, "to the right" goes down on screen. After svgRotateTo(0) and svgFlipTo(false), its axes are those of the screen.

import { svgTranslateBy } from 'utils';

Signature

export function svgTranslateBy(dx: number, dy: number): SvgTransformOrder<[dx: number, dy: number]>

Parameters

Name	Description
dx	The distance along its width.
dy	The distance along its height.

Returns

The order, to change with set(dx, dy).

Example

const position = svgTranslateBy(0, 0);
applySvgTransforms(train, [position]);
position.set(10, 0); // 10 units forward, where the train points

Tests

Line coverage: 100 %.

• ✅ moves along the axes of the element

Source

src/svg-transform/svg-translate-by.ts (on GitHub)

Uses

• SvgTransformOrder: An order of applySvgTransforms, created by svgRotateBy, svgRotateTo, svgFlipTo, svgScaleBy, svgTranslateBy or svgPlaceOn: keep it to change its values later with set.

Files it needs

src/svg-transform/svg-translate-by.ts imports, directly or not:

• src/svg-transform/internal/create-matrix.ts
• src/svg-transform/internal/create-order.ts
• src/svg-transform/internal/get-owner-svg.ts
• src/svg-transform/internal/in-own-axes.ts
• src/svg-transform/internal/order-states.ts
• src/svg-transform/svg-transform-order.ts

Source code

import { createMatrix, createOrder, inOwnAxes } from './internal';
import type { SvgTransformOrder } from './svg-transform-order';

/**
 * An order of `applySvgTransforms` that moves the element along its own axes, in its own units: turned by
 * 90°, "to the right" goes down on screen. After `svgRotateTo(0)` and `svgFlipTo(false)`, its axes are those of
 * the screen.
 *
 * @param dx - The distance along its width.
 * @param dy - The distance along its height.
 * @returns The order, to change with `set(dx, dy)`.
 * @example
 * const position = svgTranslateBy(0, 0);
 * applySvgTransforms(train, [position]);
 * position.set(10, 0); // 10 units forward, where the train points
 */
export function svgTranslateBy(dx: number, dy: number): SvgTransformOrder<[dx: number, dy: number]> {
  return createOrder([dx, dy], (element, screen, x, y) => inOwnAxes(screen, createMatrix(element).translate(x, y)));
}

Test file

import { applySvgTransforms } from './apply-svg-transforms';
import { svgTranslateBy } from './svg-translate-by';
import { describeOnScreen, renderSvg } from './testing';

describe(svgTranslateBy, () => {
  it('moves along the axes of the element', () => {
    const byId = renderSvg('<rect id="train" transform="translate(100 100) rotate(90)" width="10" height="10" />');
    applySvgTransforms(byId('train'), [svgTranslateBy(10, 0)]);
    expect(describeOnScreen(byId('train'))).toMatchObject({ x: 90, y: 110 });
  });
});

Keywords: svg, translate, by, svg transforms, function