parsePath()
Part of the @remotion/paths
package. Available from v3.3.40
Parses an SVG string path into an array of Instruction
's.
reset-path.tstsx
import {parsePath } from "@remotion/paths";constnewPath =parsePath ("M 10 10 L 20 20");/*[{ type: "M", x: 10, y: 10 },{ type: "L", x: 20, y: 20 },]*/
reset-path.tstsx
import {parsePath } from "@remotion/paths";constnewPath =parsePath ("M 10 10 L 20 20");/*[{ type: "M", x: 10, y: 10 },{ type: "L", x: 20, y: 20 },]*/
This function will throw if the SVG path is invalid.
Return type type
An array of Instruction
's. The Instruction
type can also be imported from @remotion/paths
:
ts
import type {Instruction } from "@remotion/paths";
ts
import type {Instruction } from "@remotion/paths";
The type has the following shape:
ts
export typeInstruction =| {type : "M";x : number;y : number;}| {type : "L";x : number;y : number;}| {type : "H";x : number;}| {type : "V";y : number;}| {type : "C";cp1x : number;cp1y : number;cp2x : number;cp2y : number;x : number;y : number;}| {type : "S";cpx : number;cpy : number;x : number;y : number;}| {type : "Q";cpx : number;cpy : number;x : number;y : number;}| {type : "T";x : number;y : number;}| {type : "A";rx : number;ry : number;xAxisRotation : number;largeArcFlag : boolean;sweepFlag : boolean;x : number;y : number;}| {type : "m";dx : number;dy : number;}| {type : "l";dx : number;dy : number;}| {type : "h";dx : number;}| {type : "v";dy : number;}| {type : "c";cp1dx : number;cp1dy : number;cp2dx : number;cp2dy : number;dx : number;dy : number;}| {type : "s";cpdx : number;cpdy : number;dx : number;dy : number;}| {type : "q";cpdx : number;cpdy : number;dx : number;dy : number;}| {type : "t";dx : number;dy : number;}| {type : "a";rx : number;ry : number;xAxisRotation : number;largeArcFlag : boolean;sweepFlag : boolean;dx : number;dy : number;}| {type : "Z";}| {type : "z";};
ts
export typeInstruction =| {type : "M";x : number;y : number;}| {type : "L";x : number;y : number;}| {type : "H";x : number;}| {type : "V";y : number;}| {type : "C";cp1x : number;cp1y : number;cp2x : number;cp2y : number;x : number;y : number;}| {type : "S";cpx : number;cpy : number;x : number;y : number;}| {type : "Q";cpx : number;cpy : number;x : number;y : number;}| {type : "T";x : number;y : number;}| {type : "A";rx : number;ry : number;xAxisRotation : number;largeArcFlag : boolean;sweepFlag : boolean;x : number;y : number;}| {type : "m";dx : number;dy : number;}| {type : "l";dx : number;dy : number;}| {type : "h";dx : number;}| {type : "v";dy : number;}| {type : "c";cp1dx : number;cp1dy : number;cp2dx : number;cp2dy : number;dx : number;dy : number;}| {type : "s";cpdx : number;cpdy : number;dx : number;dy : number;}| {type : "q";cpdx : number;cpdy : number;dx : number;dy : number;}| {type : "t";dx : number;dy : number;}| {type : "a";rx : number;ry : number;xAxisRotation : number;largeArcFlag : boolean;sweepFlag : boolean;dx : number;dy : number;}| {type : "Z";}| {type : "z";};