Scalable Vector Graphics/Stijl

De basisvorm en de kleur van de elementen worden bepaald door een aantal attributen, die onder "stijl" samengevat kunnen worden. In alle gevallen geldt dat de waarde als zelfstandig attribuut dan wel als style-attribuut mag worden opgegeven.

Kleur-attributen

fill

Bepaalt de kleur waarmee het element opgevuld wordt. De kleur mag worden opgegeven als HTML-kleurnaam, HTML-kleurcode of RGB-kleurcode. De verstekwaarde is "black".

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="lightgrey" />

fill-opacity

De waarde in fill-opacity is bepalend voor de mate van doorzichtigheid van de kleur waarmee de figuur opgevuld wordt. Deze mag waarden tussen 0 (nul) en 1 toegekend krijgen, waarbij 0 totale transparantie tot gevolg heeft.

• Optioneel
• Default: 1
• Waarden: 0 .. 1

<circle cx="60" cy="60" r="35" stroke="black" stroke-width="4" fill="lightgrey" fill-opacity="0.5" />

opacity

De waarde in opacity is bepalend voor de mate van doorzichtigheid waarmee de gehele figuur getekend wordt, en beïnvloedt de gehele figuur, dus zowel de stroke als de fill. De waarde kan van 0 (nul) tot 1 gekozen worden, waarbij 0 totale transparantie tot gevolg heeft, en 1 de figuur ondoorzichtig maakt.

• Optioneel
• Default: 1
• Waarden: 0 .. 1

<circle cx="60" cy="60" r="35" stroke="black" stroke-width="4" fill="lightgrey" opacity=".5" />

stroke

Bepaalt de kleur van de rand van een grafisch element.

• Optioneel
• Default: none (transparant)
• Waarde: HTML-kleurnaam, HTML-kleurcode of RGB-kleurcode

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="none" />

Opmerking

Bij tekst kan ook een stroke opgegeven worden, maar bij tekst met "font-size" kleiner dan 30 wordt de tekst lastig leesbaar. Met ' stroke="none" ' worden de letters meer gestoken en beter leesbaar.

stroke-opacity

De waarde in stroke-opacity is bepalend voor de mate van doorzichtigheid waarmee de lijn getekend wordt. Deze mag waarden tussen 0 (nul) en 1 toegekend krijgen, waarbij 0 totale transparantie tot gevolg heeft.

• Optioneel
• Default: 1
• Waarden: 0 .. 1

<circle cx="60" cy="60" r="35" stroke="black" stroke-width="4" fill="lightgrey" stroke-opacity=".5" />

Vorm-attributen

stroke-dasharray

Een reeks getallen, gescheiden door komma's, geeft een patroon van stippen, strepen of een combinatie daarvan aan de omlijning van elementen. De opgegeven waarden worden herhaald toegepast op de totale lengte van de lijn. De waarden op de oneven posities in het array bepalen de lengte van de zichtbare delen, de waarden op de even posities die van de niet zichtbare delen. Oneven aantallen opgegeven waarden leiden tot een afwisselend positief en negatief patroon: de inhoud van het array wordt herhaald om tot een even aantal waarden te komen. Een reeks zoals "20, 10, 5" wordt zodoende uitgevoerd als "20, 10, 5, 20, 10, 5".

Het voorbeeld toont een lijn die bestaat uit delen van 20 pixels, telkens met onderbrekingen van 5 pixels.

• Optioneel
• Default: 0
• Eenheid: px, em, in, mm, %

<line [...] stroke-dasharray="20,5" />

stroke-dashoffset

Verschuift het beginpunt van een met stroke-dasharray opgegeven patroon. Negatieve waarden zijn toegestaan.

• Optioneel
• Default: 0
• Eenheid: px, em, in, mm, %

<line x1="0" y1="45" x2="200" y2="45" stroke-width="6" stroke="black" stroke-dasharray="20,5" />
<line [...] stroke-dashoffset="5" />

Het voorbeeld toont twee lijnen waarvan het attribuut stroke-dasharray dezelfde waarde heeft, maar bij de onderste lijn is stroke-dashoffset toegepast, met een waarde van 5. Dit heeft tot gevolg dat de lijn 5 pixels in negatieve richting verschoven is ten opzichte van het oorspronkelijke nulpunt.

stroke-linecap

Bepaalt de vorm van het uiteinde van een line, path of polyline.

• Optioneel
• Opties:
  • butt - de lijn wordt "stomp" afgesloten
  • round - het einde wordt afgerond met een halve cirkel, met een diameter die gelijk is aan de lijndikte
  • square - het einde wordt aangevuld met een rechthoek, waarvan de breedte gelijk is aan de helft van de lijndikte
• Default: butt

<line x1="15" y1="17" x2="85" y2="17" stroke-linecap="butt" />
<line [...] stroke-linecap="round" />
<line [...] stroke-linecap="square" />

Het voorbeeld toont drie lijnen met de mogelijke waarden voor stroke-linecap, de stippellijntjes duiden de opgegeven begin- en eindpunten (x1 en x2) van de lijnen aan.

stroke-linejoin

Bepaalt de vorm van buitenhoeken in een path, polygon of polyline.

• Optioneel
• Opties:
  • miter - de hoek wordt opgevuld met de overlappende lijndelen die overeenkomen met een stroke-linecap = "square"
  • round - de hoek wordt afgerond, de straal is gelijk aan de helft van de lijndikte
  • bevel - de hoek wordt symmetrisch afgeplat, waarbij de afmetingen afhankelijk zijn van de hoek: scherpe hoeken worden meer afgeplat
• Default: miter

stroke-miterlimit

Bepaalt de mate van afplatting van scherpe hoeken in een path, polygon of polyline, wanneer de waarde van stroke-linejoin = "miter". De afplatting is afhankelijk van de scherpte van de hoek.

• Optioneel
• Waarde: 1 of groter.
• Default: 4

stroke-width

Bepaalt de dikte van de rand van een element.

• Optioneel
• Default: 1px
• Eenheid: px, em, in, mm, %

<circle cx="100" cy="75" r="50" stroke="red" stroke-width="4" />

style

Eigenschappen als fill, stroke en stroke-width kunnen ook in het style-attribuut gecombineerd worden. De beide voorbeelden geven dan ook hetzelfde resultaat. In het eerste voorbeeld zijn de kleuren als zelfstandige attributen opgegeven, in het tweede voorbeeld zijn ze gecombineerd in het style-attribuut.

<circle cx="100" cy="75" r="50" stroke="rgb(0,0,255)" stroke-width="4" fill="red" />
<circle cx="100" cy="75" r="50" style="stroke:rgb(0,0,255); stroke-width:4; fill:red;" />

• Elk sub-attribuut en de bijbehorende waarde worden gescheiden door een dubbelepunt (":")
• Elke subgroep van sub-attribuut en waarde wordt afgesloten met een puntkomma (";"). N.B.: Voor de laatste subgroep is dit niet per se nodig.