Naar inhoud springen

Scalable Vector Graphics/Basisfiguren

Uit Wikibooks

SVG

Inleiding
  1. Basisfiguren
  2. Eigen vormen
  3. Figuren opmaken
  4. Tekst

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]
  1. 1,0 1,1 1,2 1,3 1,4 1,5 Zie hier voor noodzakelijke inleidende code.
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.