SVG <pad>
SVG-pad - <pad>
Het <path>-element wordt gebruikt om een pad te definiëren.
De volgende opdrachten zijn beschikbaar voor padgegevens:
- M = verhuizen naar
- L = lineto
- H = horizontale lijn naar
- V = verticale lijn naar
- C = curvenaar
- S = vloeiende curve naar
- Q = kwadratische Bézier-curve
- T = gladde kwadratische Bézier-curveto
- A = elliptische boog
- Z = dichtbij pad
Opmerking: Alle bovenstaande commando's kunnen ook met lagere letters worden uitgedrukt. Hoofdletters betekent absoluut gepositioneerd, kleine letters betekent relatief gepositioneerd.
voorbeeld 1
Het onderstaande voorbeeld definieert een pad dat begint op positie 150,0 met een lijn naar positie 75.200 en van daaruit een lijn naar 225.200 en uiteindelijk het pad sluit naar 150,0:
Hier is de SVG-code:
Voorbeeld
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Voorbeeld 2
Bézier-curven worden gebruikt om vloeiende curven te modelleren die onbeperkt kunnen worden geschaald. Over het algemeen selecteert de gebruiker twee eindpunten en een of twee controlepunten. Een Bézier-curve met één controlepunt wordt een kwadratische Bézier-curve genoemd en de soort met twee controlepunten kubisch.
In het volgende voorbeeld wordt een kwadratische Bézier-curve gemaakt, waarbij A en C de begin- en eindpunten zijn en B het controlepunt:
Hier is de SVG-code:
Voorbeeld
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Complex? JA!!!! Vanwege de complexiteit die gepaard gaat met het tekenen van paden, wordt het ten zeerste aanbevolen om een SVG-editor te gebruiken om complexe afbeeldingen te maken.