Beispiel:SVG-path-q1.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:Grundlayout.css">
<style>
path {
fill: none;
stroke: var(--red);
stroke-width: 4;
}
text {
font-size: 12px;
font-family:sans-serif;
text-anchor: middle;
}
.control { stroke:#337599;stroke-width:1;stroke-dasharray: 1 1;}
circle { stroke:#337599;stroke-width:1;fill:skyblue;}
path {
marker-start: url(#circleMarker);
marker-mid: url(#circleMarker);
marker-end: url(#circleMarker);
}
svg {
max-height:90vh;
--blue: #337599;
--green: #8db243;
--red: #c82f04;
--yellow: #dfac20;
}
</style>
<title>quadratische Bézier-Kurven (q t)</title>
</head>
<body>
<svg viewBox="0 0 900 300">
<path d="M50,150 l100,-100 l100,100" class="control"/>
<path d="M50,150 q100,-100 200,0 t200,0 t200,0 t200,0"/>
<text x="150" y="40">Kontrollpunkt x1,x2</text>
<text x="300" y="150">Endpunkt x2, y2</text>
<text x="550" y="270">Fortsetzung mit t 200,0</text>
<text x="550" y="290">Kontrollpunkt ist Punktspiegelung des vorherigen Kontrollpunkts</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>
