Scalable Vector Graphics/Tekst
Om tekst te tonen in een SVG-afbeelding gebruiken we het "text"-element.
Tag: text
Attributen:
| naam | betekenis | type | standaardwaarde | opmerkingen |
|---|---|---|---|---|
| x | x-positie | coördinaat | 0 | |
| y | y-positie | coördinaat | 0 | |
| font-family | lettertype | |||
| font-size | lettergrootte | |||
| font-weight | ||||
| fill | kleur van de tekst | kleur | #000 | |
| stroke | none | |||
| stroke-width | 1 | |||
| style |
Let op: de tekst die wordt weergegeven geven we niet mee als attribuut, maar plaatsen we tussen de text-tags, net zoals we de figuren in de svg-tag plaatsen. N.B.: De coördinaten van de tekst zijn uitgedrukt ten opzichte van de linker bovenhoek, tenzij anders opgegeven.[1]
<text x="15" y="40" font-family="serif" font-size="36" fill="red" stroke="black" font-weight="bold">serif</text> ... etc.
Virtuele lettertypefamilies
bewerken
SVG heeft enkele virtuele font-family’s. Deze zijn geen echte lettertypefamilies, ze geven alleen een stijl aan. De SVG-toner kan dan een lettertype uitkiezen met die stijl. De weergave kan dan ook per browser, printer of PDF-document verschillen.
- serif: met schreef
- sans-serif: schreefloos
- monospace: typemachineletter, elk karakter heeft dezelfde breedte
- cursive: als handgeschreven tekens
- fantasy: speels, quasi slordig