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.
<!-- A triangle -->
<path
d="M 10,150 L 70,10 L 130,150 z"
fill="#D5D8CB"
stroke="#ECDCC6"
stroke-width="6"/>
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.
Coordinates in the “d” attribute are always unitless and hence in the user coordinate system.
You can apply also style attribute such as:
No line is drawn.
<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;
}
L takes two parameters—x and y coordinates—and draws a straight line from the current position to a new position.
<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;
}
The commands only take one argument since it move only in one direction.
<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;
}
The commands only take one argument since it move only in one direction.
<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;
}
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;
}
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)