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.
Syntax
<!-- 2 command sequence= 2 triangles -->
<!-- d="sequence1 sequence2" -->
<path
d="M 10,150 L 70,10 L 130,150 z M 150,150 L 210,10 L 270,150 z"
fill="#D5D8CB"
stroke="#ECDCC6"
stroke-width="6"/>
Output: Points has been added with a circle (not shown, click on try the code to see them)
d attribute
The shape of a path element is defined by one attribute: d that contains a suite of sequence that is defined by:
- a moveto/M command to define the initial point
- a suite of commands
- and optionally the z command to close the path
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
Example:
<path d="M 0 0 l 0 5 h 5 v -5 z" stroke="#000000" stroke-width="0.1" fill="#FFFFFF"/>
Commands
M - Move to
- establish a new initial point and a new current point.
- No line is drawn.
Syntax:
- M 100 100 to move to (100,100). The “Move to” command is called with the letter M.
- m dx dy to move to the relatif position (dx, dy).
<svg >
<!-- Go to position 100/100 then draw a horizontal line of 100 with the h command -->
<path d="M 0 100 m 100 0 h 100"/>
</svg>
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
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
See: SVG - Curve (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)