Beispiel:Path-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
path {
fill: none;
stroke-width: 4;
}
text {
font-size:12px;
font-family:monospace;
}
path {
marker-start: url(#circleMarker);
marker-mid: url(#circleMarker);
marker-end: url(#circleMarker);
}
#move { stroke:#337599;stroke-width:1;stroke-dasharray: 1 1;}
</style>
<title>path - 1</title>
</head>
<body>
<h1>Linien mit path</h1>
<svg viewBox="0 0 550 410">
<path d="M 50,50 100,100 M100,50 150,100" stroke="gold" />
<path d="m50,150 l00,100 m0,-100 l 100,100 l100,-100" stroke="red" />
<path id="move" d="m100,100 l0,-50" />
<path id="move" d="m150,150 v100" />
<text class="code" x="0" y="40">M 50,50 100,100 M100,50 150,100</text>
<text x="0" y="60">(50,50)</text>
<text class="code" x="0" y="140">m50,50 l100,100 m 0,-100 l 100,100 l100,-100</text>
<text x="0" y="165">(50,50)</text>
<text x="95" y="180">m 0,-100</text>
<text x="180" y="180">l100,100</text>
<text x="250" y="190">l100,-100</text>
<text x="50" y="270">l100,100 (Linie um 100 nach rechts und 100 nach unten)</text>
<marker id="circleMarker" markerUnits="userSpaceOnUse" markerWidth="6" markerHeight="6" refX="3" refY="3">
<circle cx="3" cy="3" r="2" fill="hsl(201 50% 75%)" stroke="#337599" stroke-width=".5"/>
</marker>
</svg>
</body>
</html>
