SVG => Text

parametrar

`<text>`	detaljer
x	Textens x-position.
y	Textens y-position.
dx	Relativ förskjutning i x-position.
dy	Relativ förskjutning i y-position.
rotera	Anger vinkelförskjutningen för textglyfer.
textLength	Passar in texten i den angivna längden.
lengthAdjust	Anger om bara kerning eller kerning & glyphs är komprimerade / sträckta för att anpassa text till angiven textlängd. Värden: avstånd eller avståndAndGlyphs
-	Parametrar som är gemensamma för alla textbitarelement (text, tref, textPath, tspan)
text-ankare	Anger horisontell justering. Värden: start, mitt, slut.
baslinje-skift	Skifter textbaslinje baserat på antingen värden som tillhandahålls av typsnittstabellen för placering av superscript eller subscript (sub, super) eller med en positiv eller negativ% eller längd. Värden: sub, super,% eller längd.

Anmärkningar

baslinjeförskjutning stöds inte av de senaste versionerna av Firefox- och Microsoft-webbläsare från och med juli 2016.

Rita text

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

X- och y-koordinaten anger positionen i det nedre vänstra hörnet av texten (såvida inte text-ankaret har ändrats).

Super- och prenumeration

Med hjälp av baslinjeförskjutningsparametern kan du ange super- eller subscript. Men detta stöds inte av alla stora webbläsare.

<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>

För en lösning över webbläsare kan du använda dy, dx och relativ fontstorlek.

<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>

Rotera text

Rotationsegenskapen roterar varje tecken med den angivna vinkeln.

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

För att rotera hela textelementet måste du använda egenskapen transform.

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

Individuell bokstavspositionering med matriser av X & Y-värden

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

Textelementet stöder individuell placering av bokstäver genom att acceptera en mängd värden för x och y.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

SVG
Text

Sök…