Scalable Vector Graphics/Eigen vormen: verschil tussen versies

Verwijderde inhoud Toegevoegde inhoud
Geen bewerkingssamenvatting
Geen bewerkingssamenvatting
Regel 1:
Om niet vast te zitten aan de [[Scalable Vector Graphics/Basisfiguren|basisvormen]] is er ook een manier om je eigen vormen te maken aan de hand van de ''path''-tag. Deze is niet beperkt tot rechte lijnen zoals de veellijn, maar kent ook verschillende krommen.
 
De algemene syntax is:
Tag: path<br />
Attributen:
{| class="prettytable"
|-
! naam
! betekenis
! type
! standaardwaarde
! opmerking
|-
| d
| beschrijving van het path
| path data
|
|
|}
 
{{Voorbeeld|1=
==Commando's==
<path d="[commando's en coördinaten]" />
Deze commando's worden gebruikt in het ''d''-attribuut. Commando's kunnen gebruikt worden als hoofdletter of kleine letter:
|}}
 
DezeIn het ''d''-attribuut kunnen verschillende commando's worden gebruikt, inom hetrechte ''d''-attribuutdanwel gebogen lijndelen te laten tekenen. Commando's kunnen gebruikt worden als hoofdletter of kleine letter:
*een hoofdletter geeft aan dat met de opgegeven coördinaten een absolute waarde bedoeld wordt, d.w.z. de werkelijke positie in het huidige actieve coördinatensysteem;
*een kleine letter betekent een relatieve waarde, dus gemeten ten opzichte van het laatst getekende punt.
 
===Ga naar===
Het "ga naar" commando wordt gebruikt om naar een bepaald punt te gaan zonder iets te tekenen. Dit commando wordt aangeroepen bij 'M' of 'm' gevolgd door een x- en y-waarde gescheiden door een komma. Worden er meerdere x- en y-waarden opgegeven dan worden deze gebruikt als 'lijn naar'. N.B.: Het eerste "M' commando kan alleen absolute waardes bevatten. In het geval dat er later nog een onderkast 'm' volgt om een volgend path te beginnen, kan die wel relatief zijn.
 
===Sluit path===
Met "sluit path" wordwordt erhet aangegeveneinde datvan heteen path eindigt.aangegeven; Dithet commando wordt aangeroepen bijis ''Z'' of ''z'.', beiden hebben als resultaat dat er een rechte lijn getekend wordt vanaf het laatst getekende punt naar het Beidenbeginpunt betekenenvan zede hetzelfdefiguur.
 
===Lijn===
Met "lijn" wordt een rechte lijn getekend van het puntlaatst waargetekende we ons nu bevindenpunt naar hetde opgegeven coördinaatpositie. Dit commando wordt aangeroepen bijmet ''L'' of ''l'', gevolgd door de ''x'' en de ''y'', gescheiden door een komma.
 
===Horizontale lijn===
Het ''H''-commando tekent een horizontale lijn van het laatst getekende punt naar het opgegeven ''x''-coördinaat.
 
===Verticale lijn===
Het ''V''-commando tekent een verticale lijn van het laatst getekende punt naar het opgegeven ''y''-coördinaat.
 
===Curve===
[[Afbeelding:Svg-path-gebogen lijn.svg|right|100px]]
Gebogen lijnen teken je met behulp van 'C' en 'c'. Hier moeten we 3 punten opgeven (voor elk een x- en y-waarde).
Regel 50 ⟶ 38:
}}
 
===Curve kort===
[[Afbeelding:Svg-path-gebogen lijn kort.svg|right|200px]]
De korte versie van de gebogen lijn gebruik je via 'S' of 's'. Bij de korte versie word het eerste controlepunt niet meegegeven maar gereflecteerd op het tweede controlepunt van de vorige boog. Als deze niet vooraf gegaan wordt door een boog wordt het eerste reflectiepunt gelijkgesteld aan het startpunt.
Regel 59 ⟶ 47:
Het eerste controlepunt is de reflectie van 155,5 en is in dit geval 155,205.
 
===Quadratische curve===
Het commando is 'Q' of 'q'. Een quadratische curve is het zelfde als een gewone curve, maar begin- en het eindpunt gebruiken in dit geval hetzelfde controlepunt.
 
===Quadratische curve kort===
De korte versie van de quadratische curve roep je op via 'T' of 't'. Dit is een mix van de gewone quadratische curve en de korte versie van de gewone curve. Omdat het controlepunt de reflectie is van het eindpunt van de vorige curve hoef je geen controlepunt mee te geven, je hebt enkel de coördinaten van het laatste punt nodig.
 
===Boog===
[[Afbeelding:Svg-path-boog.svg|right|150px]]
Bij een boog wordt er eigenlijk een deel van een ellips getoond. Deze kun je tekenen via het commando 'A' of 'a'. Bij een boog komen heel wat argumenten kijken.
Regel 76 ⟶ 64:
*y - y-positie waar de hoek eindigt
 
DeHet rode krommedeel van de krommen in het voorbeeld wordt als volgt gemaakt:
{{Voorbeeld|1=
<path d="M 125,95 a 100,50 45 0,1 100,50" fill="none" stroke="red" stroke-width="6" />
}}
 
===Samengevat===
{| class="prettytable"
|-
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.