How to use svg-pathdata - 10 common examples
To help you get started, we’ve selected a few svg-pathdata examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jasonwebb / 2d-diffusion-limited-aggregation-experiments / core / SVGLoader.js View on Github 
static load(svgNode) {
let inputPaths = svgNode.querySelectorAll('path'),
currentPath = {},
paths = [];
currentPath.points = []
// Scrape all points from all points, and record breakpoints
for(let inputPath of inputPaths) {
let pathData = new SVGPathData(inputPath.getAttribute('d'));
let previousCoords = {
x: 0,
y: 0
};
for(let [index, command] of pathData.commands.entries()) {
switch(command.type) {
// Move ('M') and line ('L') commands have both X and Y
case SVGPathData.MOVE_TO:
case SVGPathData.LINE_TO:
currentPath.points.push([
command.x,
command.y
]);this.glyphs.forEach(glyph => {
const ratio = this._options.normalize
? fontHeight / glyph.height
: fontHeight / maxGlyphHeight;
if (!isFinite(ratio)) throw new Error('foo');
glyph.width *= ratio;
glyph.height *= ratio;
const glyphPath = new SVGPathData('');
if (this._options.fixedWidth) {
glyph.width = fontWidth;
}
const yOffset = glyph.height - this._options.descent;
const glyphPathTransform = new Matrix().transform(
1,
0,
0,
-1,
0,
yOffset
); // ySymmetry
if (1 !== ratio) {
glyphPathTransform.scale(ratio, ratio);
}startContent.write('\
\
\
');
endContent.end();
stream.done();
}xmlns:svg="http://www.w3.org/2000/svg"\
xmlns="http://www.w3.org/2000/svg"\
version="1.1"\
width="' + stream.metadata.width + '"\
height="' + stream.metadata.height + '"\
viewBox="0 0 ' + stream.metadata.width + ' ' + stream.metadata.height + '">\
\
');
endContent.end();
stream.done();
}
});version="1.1"\
width="' + stream.metadata.width + '"\
height="' + stream.metadata.height + '"\
viewBox="0 0 ' + stream.metadata.width + ' ' + stream.metadata.height + '">\
\
');
endContent.end();
stream.done();
}
});startContent = new Stream.PassThrough();
stream.queue(startContent);
startContent.write('\
\
\
');
endContent.end();command.y
]);
break;
// ClosePath ('Z') commands are a naive indication that the current path can be processed and added to the world
case SVGPathData.CLOSE_PATH:
currentPath.closed = true;
paths.push(currentPath);
currentPath = {};
currentPath.points = [];
break;
}
// Unclosed paths never have CLOSE_PATH commands, so wrap up the current path when we're at the end of the path and have not found the command
if(index == pathData.commands.length - 1 && command.type != SVGPathData.CLOSE_PATH) {
let firstPoint = currentPath.points[0],
lastPoint = currentPath.points[ currentPath.points.length - 1 ];
// Automatically close the path if the first and last nodes are effectively the same, even if a CLOSE_PATH command doesn't exist
if(Math.hypot(lastPoint.x - firstPoint.x, lastPoint.y - firstPoint.y) < .1) {
currentPath.closed = true;
} else {
currentPath.closed = false;
}
paths.push(currentPath);
currentPath = {};
currentPath.points = [];
}
// Capture X coordinate, if there was one};
for(let [index, command] of pathData.commands.entries()) {
switch(command.type) {
// Move ('M') and line ('L') commands have both X and Y
case SVGPathData.MOVE_TO:
case SVGPathData.LINE_TO:
currentPath.points.push([
command.x,
command.y
]);
break;
// Horizontal line ('H') commands only have X, using previous command's Y
case SVGPathData.HORIZ_LINE_TO:
currentPath.points.push([
command.x,
previousCoords.y
]);
break;
// Vertical line ('V') commands only have Y, using previous command's X
case SVGPathData.VERT_LINE_TO:
currentPath.points.push([
previousCoords.x,
command.y
]);
break;currentPath.points = []
// Scrape all points from all points, and record breakpoints
for(let inputPath of inputPaths) {
let pathData = new SVGPathData(inputPath.getAttribute('d'));
let previousCoords = {
x: 0,
y: 0
};
for(let [index, command] of pathData.commands.entries()) {
switch(command.type) {
// Move ('M') and line ('L') commands have both X and Y
case SVGPathData.MOVE_TO:
case SVGPathData.LINE_TO:
currentPath.points.push([
command.x,
command.y
]);
break;
// Horizontal line ('H') commands only have X, using previous command's Y
case SVGPathData.HORIZ_LINE_TO:
currentPath.points.push([
command.x,
previousCoords.y
]);
break;currentPath.points = []
// Scrape all points from all points, and record breakpoints
for(let inputPath of inputPaths) {
let pathData = new SVGPathData(inputPath.getAttribute('d'));
let previousCoords = {
x: 0,
y: 0
};
for(let [index, command] of pathData.commands.entries()) {
switch(command.type) {
// Move ('M') and line ('L') commands have both X and Y
case SVGPathData.MOVE_TO:
case SVGPathData.LINE_TO:
currentPath.points.push([
command.x,
command.y
]);
break;
// Horizontal line ('H') commands only have X, using previous command's Y
case SVGPathData.HORIZ_LINE_TO:
currentPath.points.push([
command.x,
previousCoords.y
]);
break;svg-pathdata
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
