Scalable Vector Graphics/Basisfiguren
Dit hoofdstuk behandelt de zes basisfiguren die met Scalable Vector Graphics getekend kunnen worden.
Voor alle figuren geldt dat:
- coördinaten en afmetingen mogen worden opgegeven in px, %, em, in, cm of mm
- de (begin-)positie wordt bepaald door een stel coördinaten waarvan de waarde positief of negatief mag zijn
- waarden voor breedte, hoogte en straal - voorzover die bij de verschillende figuren van toepassing zijn - niet negatief mogen zijn
- de stijl - o.a. lijndikte, lijnkleur en vulkleur - nader bepaald kan worden d.m.v. attributen als stroke-width, stroke resp. fill
- dat rotaties en vervormingen met het transform-attribuut mogelijk zijn
- de positie geheel of gedeeltelijk buiten de tekenruimte (het "canvas") mag vallen
Aan het path-element, dat veel meer mogelijkheden biedt, is een apart hoofdstuk gewijd.
N.B.: In de code-voorbeelden zijn de stijl-attributen weggelaten. Zie hiervoor de hoofdstukken Stijl, Kleuren en Transformaties.
Lijn[bewerken]
Het line-element tekent een rechte lijn tussen de beide opgegeven coördinaten-paren x1,y1 resp. x2,y2.
Tag: line
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| x1 | x-positie van het eerste punt | coördinaat | 0 | |
| y1 | y-positie van het eerste punt | coördinaat | 0 | |
| x2 | x-positie van het tweede punt | coördinaat | 0 | |
| y2 | y-positie van het tweede punt | coördinaat | 0 |
<line x1="10" y1="80" x2="90" y2="20" stroke="black" />[1]
Rechthoek[bewerken]
Het rect-element tekent een rechthoek waarvan de positie bepaald wordt door de coördinaten x en y, en de afmetingen door width en height.
De hoeken kunnen afgerond worden door de gewenste afrondingsstraal op te geven in rx en/of ry. De verstekwaarde is 0 (nul), de hoeken worden dan niet afgerond. Als ry niet opgegeven wordt krijgt deze dezelfde waarde als rx, en wordt de hoek afgerond met een kwart cirkel. Bij verschillende waarden in rx en ry wordt de afronding gevormd door een kwart ellips.
Tag: rect
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| width | breedte | lengte | 0 | moet positief zijn |
| height | hoogte | lengte | 0 | moet positief zijn |
| x | x-positie | coördinaat | 0 | |
| y | y-positie | coördinaat | 0 | |
| rx | straal hoekboog op x-as | lengte | 0 | moet positief zijn |
| ry | straal hoekboog op y-as | lengte | 0 | moet positief zijn |
<rect x="10" y="30" width="80" height="40" />[1]
Cirkel[bewerken]
De circle-tag tekent een cirkel waarvan het middelpunt ligt op de coördinaten cx en cy, en de straal bepaald wordt door de waarde in r.
Tag: circle
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| cx | x-pos middelpunt | coördinaat | 0 | |
| cy | y-pos middelpunt | coördinaat | 0 | |
| r | straal | lengte | 0 | moet positief zijn |
<circle cx="50" cy="50" r="40" />[1]
Ellips[bewerken]
Het ellipse-element tekent een ellips waarvan het middelpunt ligt op de coördinaten cx en cy. De grootte van de "horizontale" straal wordt bepaald door de waarde in rx, die van de "verticale" straal door ry.
Tag: ellipse
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| cx | x-pos middelpunt | coördinaat | 0 | |
| cy | y-pos middelpunt | coördinaat | 0 | |
| rx | straal hoekboog op x-as | lengte | 0 | moet positief zijn |
| ry | straal hoekboog op y-as | lengte | 0 | moet positief zijn |
<ellipse cx="50" cy="50" rx="40" ry="20" />[1]
Veellijn[bewerken]
Het polyline-element tekent een lijn met nul of meer hoekpunten tussen de opgegeven coördinaten-paren.
Tag: polyline
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| points | punten | lijst van punten |
<polyline points="10,39 40,39 30,10 90,50 30,90 40,61 10,61" stroke="black" fill="none"/>[1]
Veelhoek[bewerken]
Het polygon-element tekent een figuur met nul of meer hoekpunten tussen de opgegeven coördinaten-paren, en sluit de figuur af door het laatst opgegeven punt te verbinden met het eerste.
N.B.: In het voorbeeld zijn dezelfde waarden gebruikt als bij het polyline-element; merk op dat de stok van de pijl nu afgesloten is.
Tag: polygon
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| points | punten | lijst van punten |
<polygon points="10,39 40,39 30,10 90,50 30,90 40,61 10,61" stroke="black" fill="none" />[1]