Over de <path>-tag in SVG
In het item Graphics op je website II: <svg>-tag wordt uitgelegd
hoe je eenvoudige plaatjes kunt programmeren met SVG. Als basis-elementen worden daar genoemd: Cirkel <circle />,
Ellips <ellipse />, Rechthoek (met scherpe en afgeronde hoeken) <rect />, Veelhoek
<polygon /> en <polylijn />, Lijn <line /> en <defs />
om instellingen te maken voor andere elementen.
Om een driehoek te tekenen kun je een polygon gebruiken. Maar een polygon heeft een nadeel: Het is opgebouwd
uit rechte lijnstukken. Verder is het gesloten figuur, dus zonder begin en zonder eind. Een open figuur kun je opbouwen uit
een serie <line />-tags. Maar er is een andere, meer dynamische mogelijkheid: <path />.
De <path />-tag heeft een aantal attributen, waarvan de belangrijkste hier worden genoemd:
| Attribuut | | Betekenis |
fill | | Bepaalt of de omtrek van een figuur moet worden
opgevuld, met de opgegeven kleurnaam of -code. Als je "none"
invult blijft het binnenste van de figuur transparant.
Voor een open figuur moet je altijd "none" gebruiken. |
stroke | | De kleurnaam of -code van de omtrek van een figuur. |
| stroke-width | | De breedte (in pixels) van de figuur die
je tekent. |
d | | Dit is de definitie van de figuur. Daarvoor is
er een aantal subcommando's beschikbaar:
- M = moveto. Parameters: x en y. Verplaats de pen naar de coördinaten
x en y. Als je dit weglaat wordt (x, y) = (0, 0)
genomen.
N.B.: De oorsprong van het assenstelsel ligt in de linker bovenhoek van de figuur. De X-as wijst naar links, de Y-as
wijst naar beneden.
- L = lineto. Parameters: x en y. Trek een lijn van het laatste punt naar
de coördinaten x en y.
- H = horizontal lineto. Parameter: x. Trek een horizontale lijn van het laatste punt
naar het punt met de gegeven x-coördinaat.
- V = vertical lineto. Parameter: y. Trek een verticale lijn van het laatste punt
naar het punt met de gegeven y-coördinaat.
- C = cubic Bézier curve. Parameters: x1, y1, x2,
y2, x en y. De kromme begint in het laatste punt. De raaklijn wordt bepaald
door x1 en y1. De kromme eindigt in x en y; de raaklijn
wordt bepaald door x2 en y2.
Zie ook het item Over Bézier-krommen.
- S = smooth cubic Bézier curve. Parameters: x2, y2, x'
en y. Deze kromme wordt het beste gebruikt na een C-kromme of na een andere S-kromme. De Bézier
curve begint in het eindpunt van de vorige Bézier curve. De raaklijnen zijn daar aan elkaar gelijk. De kromme
eindigt in x en y; de raaklijn wordt bepaald door x2 en y2.
Als een S-kromme niet volgt op een C-kromme of een andere S-kromme, wordt de positie van de muis gebruikt om de raaklijn
in het eerste punt te bepalen. Dat werkt alleen in een interactieve toepassing. In een geprogrammeerde toepassing moet
een S-kromme dus alijd worden voorafgegaan door een C-kromme of een andere S-kromme.
- Q = quadratic Bézier curve. Parameters: x1, y1, x en
y. Dit is een beperkte kwadratische Bézier curve. De kromme begint in het laatste punt en eindigt
in x en y; de raaklijn in begin- én eindpunt wordt bepaald door x1 en
y1; dit het snijpunt van de raaklijnen het in begin- en eindpunt van de kromme.
Zie ook het item Over Bézier-krommen.
- T = smooth quadratic Bézier curve. Parameters: x en y. De kromme
begint in het laatste punt en eindigt in x en y. De raaklijn in het beginpunt is dezelfde
als die in het laatste punt van de vorige kromme. De raaklijn in het laatste punt is evenwijdig aan de raaklijn in
het eerste punt van de vorige kromme. Deze kromme kan alleen worden gebruikt als er een Q-kromme of andere T-kromme
aan vooraf gaat. Anders wordt er een rechte lijn getekend.
- A = elliptical Arc. Parameters: rx, ry, x-axis-rotation,
large-arc-flag, sweep-flag, x en y. Omdat het hier gaat om
een boog met de vorm van een ellips, zijn er veel parameters nodig. De betekenis van de parameters is als volgt:
º rx en ry zijn de halve lange as en halve korte as van de ellips. Als rx
en ry aan elkaar gelijk zijn krijg je een cirkelboog.
º x-axis-rotation beschrijft de hoek (in graden) waar de x-as over wordt gedraaid (positief
is met de klok mee).
º large-arc-flag geeft aan of de boog groter (flag=1) of kleiner (flag=0) is
dan 180°. Zie de illustratie hiernaast.
º sweep-flag geeft aan of het grootste (flag=1) of het kleinste (flag=0) deel
wordt getekend. Zie de illustratie hiernaast.
º x en y markeren het eindpunt van de boog.
- Z = closepath. Geen parameters. Dit commando sluit het <path> door een rechte lijn te
trekken naar het beginpunt van het <path>.
Alle commando's kunnen zowel als hoofdletter als als kleine letter worden opgegegven. Een hoofdletter geeft aan dat het
om absolute coördinaten gaat. Een kleine letter geeft aan dat het om relatieve coördinaten gaat.
De letters en de getallen worden gescheiden door een spatie of een komma.
Bron: Tutorial op Mozilla.org
|
SVG heeft een eigen DOM, met JavaScript-functions warmee je dingen kunt aanpassen. Bij <path /> kun je
de lengte van de figuur gebruiken. Als je een SVG-element een id meegeeft, kun je dat element benaderen met
getElementById().
