SVG => Tekst

Parametry

`<text>`	Detale
x	Pozycja x tekstu.
y	Pozycja y tekstu.
dx	Względne przesunięcie w pozycji x.
dy	Względne przesunięcie w pozycji y.
obracać się	Określa przesunięcie kątowe dla glifów tekstu.
textLength	Dopasowuje tekst do podanej długości.
lengthAdjust	Określa, czy tylko kerning, kerning i glify są kompresowane / rozciągane w celu dopasowania tekstu do określonego textLength. Wartości: spacing lub spacingAndGlyphs
-	Parametry wspólne dla wszystkich elementów dzielenia tekstu (text, tref, textPath, tspan)
zakotwiczenie tekstu	Określa wyrównanie w poziomie. Wartości: początek, środek, koniec.
przesunięcie linii podstawowej	Przesuwa linię bazową tekstu w oparciu o wartości podane w tabeli czcionek dla pozycjonowania w indeksie górnym lub dolnym (sub, super) lub o dodatni lub ujemny% lub długość. Wartości: sub, super,% lub length.

Uwagi

Przesunięcie linii bazowej nie jest obsługiwane w najnowszych wersjach przeglądarek Firefox i Microsoft od lipca 2016 r.

Narysuj tekst

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

Współrzędna xiy określa pozycję lewego dolnego rogu tekstu (chyba że kotwica tekstu została zmodyfikowana).

Super- i indeks dolny

Za pomocą parametru przesunięcia linii podstawowej można określić indeks dolny lub dolny. Ale nie jest to obsługiwane przez wszystkie główne przeglądarki.

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

W rozwiązaniach dla różnych przeglądarek możesz użyć dy, dx i względnego rozmiaru czcionki.

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

Obróć tekst

Właściwość rotate obraca każdy znak o określony kąt.

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

Aby obrócić cały element tekstowy, musisz użyć właściwości transform.

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

Indywidualne pozycjonowanie liter za pomocą tablic wartości X i Y

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

Element Text obsługuje indywidualne umieszczanie liter, akceptując tablicę wartości dla xiy.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

SVG
Tekst

Szukaj…