translatePath()
Part of the @remotion/paths
package.
Translates the path by the given x
and y
coordinates.
Arguments
The function takes three arguments:
path
, the original SVG path.x
, the amount of horizontal translation.y
the amount of vertical translation.
Return value
Returns a new string
containing a path if it is valid:
translate-x.tstsx
import {translatePath } from "@remotion/paths";consttranslatedPath =translatePath ("M 50 50 L 150 50", 10, 0);console .log (translatedPath ); // "M 50 50 L 150 50"
translate-x.tstsx
import {translatePath } from "@remotion/paths";consttranslatedPath =translatePath ("M 50 50 L 150 50", 10, 0);console .log (translatedPath ); // "M 50 50 L 150 50"
translate-y.tstsx
import {translatePath } from "@remotion/paths";consttranslatedPath =translatePath ("M10 10 L15 15", 10, 10);console .log (translatedPath ); // "M 20 20 L 25 25"
translate-y.tstsx
import {translatePath } from "@remotion/paths";consttranslatedPath =translatePath ("M10 10 L15 15", 10, 10);console .log (translatedPath ); // "M 20 20 L 25 25"
translate-x-and-y.tstsx
import {translatePath } from "@remotion/paths";consttranslatedPath =translatePath ("M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0",10,20);console .log (translatedPath ); // "M 45 70 a 25 25 0 1 1 50 0 a 25, 5 0 1 1 -50 0"
translate-x-and-y.tstsx
import {translatePath } from "@remotion/paths";consttranslatedPath =translatePath ("M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0",10,20);console .log (translatedPath ); // "M 45 70 a 25 25 0 1 1 50 0 a 25, 5 0 1 1 -50 0"
The function will throw if the path is invalid:
tsx
translatePath ("remotion", 10, 0); // Malformed path data: "m" ...
tsx
translatePath ("remotion", 10, 0); // Malformed path data: "m" ...
Credits
Source code stems mostly from translate-svg-path and serialize-svg-path.