SVG <cesta>
Cesta SVG - <cesta>
Element <path> se používá k definování cesty.
Pro data cesty jsou k dispozici následující příkazy:
- M = moveto
- L = lineto
- H = horizontální čárato
- V = svislá čárato
- C = křivka
- S = hladká křivka
- Q = kvadratická Bézierova křivka
- T = hladká kvadratická Bézierova křivkato
- A = eliptický oblouk
- Z = blízká cesta
Poznámka: Všechny výše uvedené příkazy lze také vyjádřit malými písmeny. Velká písmena znamenají absolutní polohu, malá písmena znamenají relativní polohu.
Příklad 1
Níže uvedený příklad definuje cestu, která začíná na pozici 150,0 čárou na pozici 75 200, odtud čárou na 225 200 a nakonec uzavírá cestu zpět na 150,0:
Zde je kód SVG:
Příklad
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Příklad 2
Bézierovy křivky se používají k modelování hladkých křivek, které lze neomezeně měnit. Obecně si uživatel vybere dva koncové body a jeden nebo dva kontrolní body. Bézierova křivka s jedním řídicím bodem se nazývá kvadratická Bézierova křivka a druh se dvěma řídicími body se nazývá kubická.
Následující příklad vytvoří kvadratickou Bézierovu křivku, kde A a C jsou počáteční a koncové body, B je řídicí bod:
Zde je kód SVG:
Příklad
<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>
Komplex? ANO!!!! Vzhledem ke složitosti kreslení cest se důrazně doporučuje používat k vytváření složité grafiky editor SVG.