SVG <pad>
SVG-pad - <pad>
Die <pad>-element word gebruik om 'n pad te definieer.
Die volgende opdragte is beskikbaar vir paddata:
- M = beweeg na
- L = lynto
- H = horisontale lynto
- V = vertikale lyntot
- C = kromme
- S = gladde kromme
- Q = kwadratiese Bézier-kromme
- T = gladde kwadratiese Bézier-kurveto
- A = elliptiese boog
- Z = nabypad
Let wel: Al die opdragte hierbo kan ook met laer letters uitgedruk word. Hoofletters beteken absoluut geposisioneer, kleinletters beteken relatief geposisioneer.
Voorbeeld 1
Die voorbeeld hieronder definieer 'n pad wat by posisie 150,0 begin met 'n lyn na posisie 75,200, dan van daar af, 'n lyn na 225,200 en uiteindelik die pad terug na 150,0 toemaak:
Hier is die SVG-kode:
Voorbeeld
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Voorbeeld 2
Bézier-kurwes word gebruik om gladde kurwes te modelleer wat onbepaald geskaal kan word. Oor die algemeen kies die gebruiker twee eindpunte en een of twee beheerpunte. 'n Bézier-kromme met een beheerpunt word 'n kwadratiese Bézier-kromme genoem en die soort met twee beheerpunte word kubies genoem.
Die volgende voorbeeld skep 'n kwadratiese Bézier-kromme, waar A en C die begin- en eindpunte is, B is die kontrolepunt:
Hier is die SVG-kode:
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>
Kompleks? JA!!!! As gevolg van die kompleksiteit betrokke by die teken van paaie, word dit sterk aanbeveel om 'n SVG-redigeerder te gebruik om komplekse grafika te skep.