Beispiel:SVG-8-path.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">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
path {
fill: none;
stroke-width: 4;
}
#move { stroke:#337599;stroke-width:1;stroke-dasharray: 1 1;}
text {
font-size:12px;
font-family:monospace;
}
path {
marker-start: url(#circleMarker);
marker-mid: url(#circleMarker);
marker-end: url(#circleMarker);
}
</style>
<title>path - 2</title>
</head>
<body>
<h1>path mit m, l, h und v</h1>
<svg viewbox="0 0 450 310">
<path d="M50,50 H100" stroke="blue" />
<path d="M50,50 L100,100" stroke="red" />
<path d="M50,50 V100" stroke="gold" />
<path d="M50,150 l100,100" stroke="red" />
<path d="M50,150 h100" stroke="blue" />
<path d="M50,150 v100" stroke="gold" />
<text x="35" y="45"> M50,50</text>
<text x="110" y="50">H100 (horizontal auf x=100)</text>
<text x="75" y="70">L100,100 (Linie auf x=100, y=100)</text>
<text x="10" y="120">V100 (vertikal auf y=100)</text>
<text x="35" y="145">M50,150</text>
<text x="160" y="150">h100 (horizontal um 100 länger)</text>
<text x="85" y="180">l100,100</text>
<text x="100" y="195"> (Linie um 100 nach rechts und 100 nach unten)</text>
<text x="35" y="270">v100 (vertikal um 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>