Scalable Vector Graphics/Basisfiguren

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

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]

Scalable Vector Graphics Line.svg

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 opmerking
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" />

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.

Scalable Vector Graphics Rect.svg

Tag: rect
Attributen:

naam betekenis type standaardwaarde opmerking
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" />

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.

Scalable Vector Graphics Circle2.svg

Tag: circle
Attributen:

naam betekenis type standaardwaarde opmerking
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" />

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.

Scalable Vector Graphics Ellipse2.svg

Tag: ellipse
Attributen:

naam betekenis type standaardwaarde opmerking
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" />

Veellijn[bewerken]

Het polyline-element tekent een lijn met nul of meer hoekpunten tussen de opgegeven coördinaten-paren.

Scalable Vector Graphics Polyline.svg

Tag: polyline
Attributen:

naam betekenis type standaardwaarde opmerking
points punten lijst van punten
<polyline points="10,39 40,39 30,10 90,50 30,90 40,61 10,61" />

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.

Scalable Vector Graphics Polygon.svg

Tag: polygon
Attributen:

naam betekenis type standaardwaarde opmerking
points punten lijst van punten
<polygon points="10,39 40,39 30,10 90,50 30,90 40,61 10,61" />
Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.