Class: SvgPath
Methods
join
▸ Static join(paths, close?, options?): SvgPath
This static function on SvgPath is joining multiple paths together into one paths.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
paths | SvgPath[] | undefined | A list of paths to be joined together. The order is important. |
close | boolean | false | If the newly created path should be a closed path |
options? | SvgPathOptions | undefined | Path options for the newly created path. |
Returns
Defined in
position
▸ position(pos): SvgPath
Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor.
Parameters
| Name | Type | Description |
|---|---|---|
pos | number | If a number is passed then the cursor is set to this position in the path element array. |
Returns
If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned.
Defined in
▸ position(): number
Returns
number
Defined in
remove
▸ remove(count): SvgPath
Removes elements from the path starting at the current position.
Parameters
| Name | Type | Description |
|---|---|---|
count | number | Number of path elements that should be removed from the current position. |
Returns
The current path object for easy call chaining.
Defined in
move
▸ move(x, y, relative?, data?): SvgPath
Use this function to add a new move SVG path element.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
x | number | undefined | The x coordinate for the move element. |
y | number | undefined | The y coordinate for the move element. |
relative | boolean | false | If set to true the move element will be created with relative coordinates (lowercase letter) |
data? | SegmentData | undefined | Any data that should be stored with the element object that will be accessible in pathElement |
Returns
The current path object for easy call chaining.
Defined in
line
▸ line(x, y, relative?, data?): SvgPath
Use this function to add a new line SVG path element.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
x | number | undefined | The x coordinate for the line element. |
y | number | undefined | The y coordinate for the line element. |
relative | boolean | false | If set to true the line element will be created with relative coordinates (lowercase letter) |
data? | SegmentData | undefined | Any data that should be stored with the element object that will be accessible in pathElement |
Returns
The current path object for easy call chaining.
Defined in
curve
▸ curve(x1, y1, x2, y2, x, y, relative?, data?): SvgPath
Use this function to add a new curve SVG path element.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
x1 | number | undefined | The x coordinate for the first control point of the bezier curve. |
y1 | number | undefined | The y coordinate for the first control point of the bezier curve. |
x2 | number | undefined | The x coordinate for the second control point of the bezier curve. |
y2 | number | undefined | The y coordinate for the second control point of the bezier curve. |
x | number | undefined | The x coordinate for the target point of the curve element. |
y | number | undefined | The y coordinate for the target point of the curve element. |
relative | boolean | false | If set to true the curve element will be created with relative coordinates (lowercase letter) |
data? | SegmentData | undefined | Any data that should be stored with the element object that will be accessible in pathElement |
Returns
The current path object for easy call chaining.
Defined in
arc
▸ arc(rx, ry, xAr, lAf, sf, x, y, relative?, data?): SvgPath
Use this function to add a new non-bezier curve SVG path element.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
rx | number | undefined | The radius to be used for the x-axis of the arc. |
ry | number | undefined | The radius to be used for the y-axis of the arc. |
xAr | number | undefined | Defines the orientation of the arc |
lAf | number | undefined | Large arc flag |
sf | number | undefined | Sweep flag |
x | number | undefined | The x coordinate for the target point of the curve element. |
y | number | undefined | The y coordinate for the target point of the curve element. |
relative | boolean | false | If set to true the curve element will be created with relative coordinates (lowercase letter) |
data? | SegmentData | undefined | Any data that should be stored with the element object that will be accessible in pathElement |
Returns
The current path object for easy call chaining.
Defined in
parse
▸ parse(path): SvgPath
Parses an SVG path seen in the d attribute of path elements, and inserts the parsed elements into the existing path object at the current cursor position. Any closing path indicators (Z at the end of the path) will be ignored by the parser as this is provided by the close option in the options of the path object.
Parameters
| Name | Type | Description |
|---|---|---|
path | string | Any SVG path that contains move (m), line (l) or curve (c) components. |
Returns
The current path object for easy call chaining.
Defined in
stringify
▸ stringify(): string
This function renders to current SVG path object into a final SVG string that can be used in the d attribute of SVG path elements. It uses the accuracy option to round big decimals. If the close parameter was set in the constructor of this path object then a path closing Z will be appended to the output string.
Returns
string
Defined in
scale
▸ scale(x, y): SvgPath
Scales all elements in the current SVG path object. There is an individual parameter for each coordinate. Scaling will also be done for control points of curves, affecting the given coordinate.
Parameters
| Name | Type | Description |
|---|---|---|
x | number | The number which will be used to scale the x, x1 and x2 of all path elements. |
y | number | The number which will be used to scale the y, y1 and y2 of all path elements. |
Returns
The current path object for easy call chaining.
Defined in
translate
▸ translate(x, y): SvgPath
Translates all elements in the current SVG path object. The translation is relative and there is an individual parameter for each coordinate. Translation will also be done for control points of curves, affecting the given coordinate.
Parameters
| Name | Type | Description |
|---|---|---|
x | number | The number which will be used to translate the x, x1 and x2 of all path elements. |
y | number | The number which will be used to translate the y, y1 and y2 of all path elements. |
Returns
The current path object for easy call chaining.
Defined in
transform
▸ transform(transformFnc): SvgPath
This function will run over all existing path elements and then loop over their attributes. The callback function will be called for every path element attribute that exists in the current path. The method signature of the callback function looks like this:
function(pathElement, paramName, pathElementIndex, paramIndex, pathElements)
If something else than undefined is returned by the callback function, this value will be used to replace the old value. This allows you to build custom transformations of path objects that can't be achieved using the basic transformation functions scale and translate.
Parameters
| Name | Type | Description |
|---|---|---|
transformFnc | <T>(cmd: PathCommand<T>, param: keyof T, cmdIndex: number, paramIndex: number, cmds: PathCommand<T>[]) => number | void | The callback function for the transformation. Check the signature in the function description. |
Returns
The current path object for easy call chaining.
Defined in
clone
▸ clone(close?): SvgPath
This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
close | boolean | false | Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used. |
Returns
Defined in
splitByCommand
▸ splitByCommand(command): SvgPath[]
Split a Svg.Path object by a specific command in the path chain. The path chain will be split and an array of newly created paths objects will be returned. This is useful if you'd like to split an SVG path by it's move commands, for example, in order to isolate chunks of drawings.
Parameters
| Name | Type | Description |
|---|---|---|
command | string | The command you'd like to use to split the path |
Returns
SvgPath[]
Defined in
Properties
pathElements
• pathElements: PathCommand<PathParams>[] = []
Defined in
pos
• Private pos: number = 0
Defined in
options
• Private options: Required<SvgPathOptions>
Defined in
Constructors
constructor
• new SvgPath(close?, options?)
Used to construct a new path object.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
close | boolean | false | If set to true then this path will be closed when stringified (with a Z at the end) |
options? | SvgPathOptions | undefined | Options object that overrides the default objects. See default options for more details. |