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:
|}▼
{{Voorbeeld|1=
<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:▼
▲
*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.
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.
Met "sluit path"
Met "lijn" wordt een rechte lijn getekend van het
Het ''H''-commando tekent een horizontale lijn van het laatst getekende punt naar het opgegeven ''x''-coördinaat.
Het ''V''-commando tekent een verticale lijn van het laatst getekende punt naar het opgegeven ''y''-coördinaat.
[[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:
}}
[[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.
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.
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.
[[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
{{Voorbeeld|1=
<path d="M 125,95 a 100,50 45 0,1 100,50" fill="none" stroke="red" stroke-width="6" />
}}
{| class="prettytable"
|-
|