Scalable Vector Graphics/Eigen vormen

Om niet vast te zitten aan de basis vormen 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 krommen.

tag: path
attributen:

Deze commando's worden gebruikt in 'd'. Commando's kunnen gebruikt worden als hoofdletter of kleine letter. Hoofdletters geven aan dat het om een absolute waarde gaat en kleine letters geven aan dat het om relatieve waarden gaat. Wordt er begonnen met een relatieve waarde dan wordt deze gezien als een absolute waarde.

De ga naar commando word 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 geschijden door een ','. Worden er meerdere x en y waardes opgegeven dan worden deze gebruikt als 'lijn naar'.

Met sluit path word er aangegeven dat het path eindigd. Dit commando wordt aangeroepen bij 'Z' of 'z'. Beiden beteken ze het zelfde.

Met de lijn naar wordt een rechte lijn getekend van het punt waar we ons nu bevinden naar het opgegeven coördinaat. Dit commando wordt aangeroepen bij 'L' of 'l' gevolgd door de x en de y geschijden door een ','

Een horizontal lijn kun je tekenen aan de hand van 'H' of 'h' gevolgd door de x waarde.

Een verticale lijn kun je tekenen aan de hand van 'V' of 'v' gevolgd door de y waarde.

Gebogen lijnen teken je met behulp van 'C' en 'c'. Hier moeten we 3 punten opgeven (voor elk een x en y waarde).

• Eerste controle punt voor het begin van de boog
• Tweede controle punt voor het einde van de boog
• Eindpunt naar waar de boog getekend word

vb.
<path d="M5,105 C5,5 155,5 155,105" stroke="black" fill="none" />

De korte versie van de gebogen lijn gebruik je via 'S' of 's'. Bij de korte versie word het eerste controle punt niet meegegeven maar gereflecteerd op het tweede controle punt van de vorige boog. Word deze niet vooraf gegaan door een boog word het eerste reflectie punt gelijk gesteld aan het start punt. <path d="M5,105 C5,5 155,5 155,105" S305,205 305,105" stroke="black" fill="none" />
Eerste controle punt is de reflectie van 155,5 en is in dit geval 155,2055