SVG - Path
About
Image Vector - Path in Svg.
Path is the generic element to define a shape.
Complex shapes composed only of straight lines can be created as polylines.
Articles Related
Syntax
<!-- A triangle -->
<path
d="M 10,150 L 70,10 L 130,150 z"
fill="#D5D8CB"
stroke="#ECDCC6"
stroke-width="6"/>
d attribute
The shape of a path element is defined by one attribute: d that contains a suite of command.
All of the commands also come in two variants.
- An uppercase letter specifies absolute coordinates on the page,
- and a lowercase letter specifies relative coordinates (e.g. move from the last point 10px up and 7px to the left).
Coordinates in the “d” attribute are always unitless and hence in the user coordinate system.
Style attributes
You can apply also style attribute such as:
- fill (none, transparent)
- stroke
- stroke-width
Commands
M - Move to
No line is drawn.
- M 10 10 to move to (10,10). The “Move to” command is called with the letter M.
- m dx dy to move to the relatif position (dx, dy).
<svg >
<path d="M 10 10 m 40 0"/>
<!-- Equivalent to Points -->
<circle cx="10" cy="10" r="5" />
<circle cx="50" cy="10" r="5" />
</svg>
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
circle {
fill: red;
}
Draw a straight line
L - Line To
L takes two parameters—x and y coordinates—and draws a straight line from the current position to a new position.
- L x y to draw a line with absolute coordinates
- l dx dy to draw a line with relatif coordinates
<svg width="200" height="30" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 L 30 10"/>
<!-- Points -->
<circle cx="10" cy="10" r="2"/>
<circle cx="30" cy="10" r="2"/>
</svg>
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
circle {
fill: red;
}
H - Draws a horizontal line
The commands only take one argument since it move only in one direction.
- H x to move absolutely
- h dx to move relatively
<svg width="200" height="30" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 H 30"/>
<!-- Points -->
<circle cx="10" cy="10" r="2"/>
<circle cx="30" cy="10" r="2"/>
</svg>
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
circle {
fill: red;
}
V - Draws a vertical line.
The commands only take one argument since it move only in one direction.
- V y to move absolutely
- v dy to move relatively
<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 V 30"/>
<!-- Points -->
<circle cx="10" cy="10" r="2"/>
<circle cx="10" cy="30" r="2"/>
</svg>
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
circle {
fill: red;
}
Draw a curved line
Z- Close the path
This command draws a straight line from the current position back to the first point of the path. There is no difference between the uppercase and lowercase command. Z or z
<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 V 30 H 30 z"/>
<!-- Points -->
<circle cx="10" cy="10" r="2"/>
<circle cx="10" cy="30" r="2"/>
<circle cx="30" cy="30" r="2"/>
</svg>
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
circle {
fill: red;
}
Example
Javascript Path Generation
data=[
{x: 20, y: "20"}
, {x: 3, y: "3"}
]
let d = `
M${data[0].x} ${data[0].y}
${data.slice(1).map(d => {
return `L${d.x} ${d.y}`;
}).join(' ')}
`;
console.log(d)