Scalable Vector Graphics/Tekst

SVG

Inleiding
  1. Basisfiguren
  2. Eigen vormen
  3. Figuren opmaken
  4. 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 lettertype­families, 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
  1. Zie hier voor noodzakelijke inleidende code.
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.