SVG => Tekst

parameters

`<text>`	Details
X	De x-positie van de tekst.
Y	De y-positie van de tekst.
dx	Relatieve verschuiving in x-positie.
dy	Relatieve verschuiving in y-positie.
draaien	Specificeert de hoekverplaatsing voor tekstglyphs.
textLength	Past de tekst in de opgegeven lengte.
lengthAdjust	Geeft aan of alleen kerning of kerning & glyphs worden gecomprimeerd / uitgerekt om tekst in de opgegeven textLength te passen. Waarden: spacing of spacingAndGlyphs
-	Parameters die gemeenschappelijk zijn voor alle chunking-elementen voor tekst (tekst, trefwoorden, textPath, tspan)
text-anchor	Specificeert horizontale uitlijning. Waarden: start, midden, einde.
basislijn-shift	Verschuift de basislijn van de tekst op basis van beide waarden uit de lettertypetabel voor superscript- of subscript-positionering (sub, super) of met een positieve of negatieve% of lengte. Waarden: sub, super,% of lengte.

Opmerkingen

baseline-shift wordt niet ondersteund door de meest recente versies van Firefox en Microsoft-browsers vanaf juli 2016.

Teken tekst

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="40" y="60" font-size="28">Hello World!</text>
</svg>

De x- en y-coördinaat geeft de positie van de linkeronderhoek van de tekst aan (tenzij het tekstanker is gewijzigd).

Super- en subscript

Met de parameter baseline-shift kunt u super- of subscript opgeven. Maar dit wordt niet door alle belangrijke browsers ondersteund.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
    <text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>

Voor een cross-browser oplossing kunt u dy, dx en relatieve lettergrootte gebruiken.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
    <text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>

Roteer tekst

Met de eigenschap roteren roteert elk teken met de opgegeven hoek.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>

Als u het hele tekstelement wilt roteren, moet u de eigenschap transform gebruiken.

<svg xmlns="http://www.w3.org/2000/svg">
    <text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>

Individuele positionering van letters met arrays met X- en Y-waarden

<svg width="400px" height="200px"> 
 <text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
    Individually Spaced Text
  </text>
</svg>

Het tekstelement ondersteunt individuele plaatsing van letters door een reeks waarden voor x en y te accepteren.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

SVG
Tekst

Zoeken…