Beispiel:SVG-8-path.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-8-path.html&oldid=95067“