SVG => Текст

параметры

`<text>`	подробности
Икс	Позиция x текста.
Y	Позиция y текста.
дх	Относительный сдвиг в позиции x.
ду	Относительный сдвиг в позиции y.
вращаться	Определяет угловое смещение для текстовых символов.
textLength	Подходит к тексту в заданную длину.
lengthAdjust	Указывает, сжаты / растянуты ли кернинг или кернинг и глифы в соответствии с текстом в указанную текстовую длину. Значения: интервал или интервалAndGlyphs
-	Параметры, общие для всех элементов текстового фрагмента (текст, tref, textPath, tspan)
текст-якорь	Указывает горизонтальное выравнивание. Значения: начало, посередине, конец.
смещение базовой линии	Сдвигает текстовую базовую линию на основе любых значений, предоставляемых таблицей шрифтов для надстрочного или индексного позиционирования (sub, super) или положительным или отрицательным% или длиной. Значения: sub, super,% или length.

замечания

базовый сдвиг не поддерживается самыми современными версиями браузеров Firefox и Microsoft по состоянию на июль 2016 года.

Рисовать текст

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

Координаты x и y задают положение нижнего левого угла текста (если только текстовый якорь не был изменен).

Супер- и индекс

Используя параметр базового сдвига, вы можете указать супер- или индекс. Но это не поддерживается всеми основными браузерами.

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

Для кросс-браузерного решения вы можете использовать dy, dx и относительный размер шрифта.

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

Повернуть текст

Свойство rotate поворачивает каждый символ на указанный угол.

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

Чтобы повернуть весь текстовый элемент, вы должны использовать свойство transform.

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

Индивидуальное позиционирование букв с массивами значений X и Y

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

Элемент Text поддерживает индивидуальное размещение букв, принимая массив значений для x и y.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

SVG
Текст

Поиск…