SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:SVG-11-path-quad-bezier.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;
}

text {
 font-size: 12px;
 text-anchor: middle;;
}

.control { stroke:steelBlue;stroke-width:1;stroke-dasharray: 1 1;}
circle { stroke:steelBlue;stroke-width:1;fill:skyblue;}

path {
	marker-start: url(#circleMarker);
	marker-mid: url(#circleMarker);
	marker-end: url(#circleMarker);	
}

svg {
  max-height:90vh;
}
 
  </style>
  <title>Pfade mit quadratischen Bézier-Kurven</title>
</head>
 
<body>
<svg viewbox="0 0 750 600">
	<path class="control" d="M50,250 l100,-200 l100,200" />
	<path d="M50,250 q100,-200 200,0" stroke="steelBlue"/>
	<text x="50" y="250" dy="20">Startpunkt A</text>
	<text x="100" y="60" dy="-10">Kontrollpunkt B</text>
	<text x="250" y="250" dy="20">Endpunkt C</text>
	
	<path class="control" d="M100,550 l400,-500 l-200,500" />
	<path id="vier" d="M100,550 q400,-500 200,0" stroke="red" />
	<text x="100" y="550" dy="20">Startpunkt A</text>
	<text x="450" y="60" dy="-10">Kontrollpunkt B</text>
	<text x="300" y="550" dy="20">Endpunkt C</text>


	<path class="control" d="M500,550 l-90,-200 l290,200" />
	<path d="M500,550 q-90,-200 200,0" stroke="gold"/>
	<text x="500" y="550" dy="20">Startpunkt A</text>
	<text x="450" y="350" dx="10">Kontrollpunkt B</text>
	<text x="700" y="550" dy="20">Endpunkt C</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="steelBlue" stroke-width=".5"/>
  </marker>
		
  </svg>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-11-path-quad-bezier.html&oldid=97499“