textLength

Атрибут textLength, доступный для элементов SVG <text> и <tspan>, позволяет указать ширину области, в которую будет выводится текст. Веб-браузер обеспечит, чтобы текст не выходил за пределы этой области, используя метод или методы, указанные атрибутом lengthAdjust. По умолчанию корректируется только расстояние между символами, но размер глифов также можно изменить, изменив lengthAdjust.

Используя textLength, можно гарантировать, что текст SVG отображается с одинаковой шириной независимо от условий, включая случаи, когда веб-шрифты не загружены (или ещё не загружены).

Этот атрибут можно использовать с следующими элементами SVG:

Пример

html

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <text y="20" textLength="6em">Small text length</text>
  <text y="40" textLength="120%">Big text length</text>
</svg>

Примечания по использованию

Значение	`<length-percentage>` \| `<number>`
Значение по умолчанию	Нет
Анимируемо	Да

<length-percentage>: Это значение задаёт ширину области, которую займёт текст, как абсолютную длину или процент.
<number>: Числовое значение определяет длину, ссылающуюся на единицы текущей системы координат.

Интерактивный пример

Создадим простой пример, где текст можно изменять размер с помощью элемента <input> типа "range".

CSS

css

.controls {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
}

SVG

Начнём с SVG. Это довольно просто, с пространством 1000 на 300 пикселей, отображаемым в виде 10 сантиметров на 3 сантиметра.

html

<svg
  width="10cm"
  height="3cm"
  viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg">
  <rect
    x="1"
    y="1"
    width="998"
    height="298"
    fill="none"
    stroke="green"
    stroke-width="2" />

  <text
    id="hello"
    x="10"
    y="150"
    font-family="sans-serif"
    font-size="60"
    fill="green">
    Hello world!
  </text>
</svg>

Сначала используется элемент <rect> для создания и вывода прямоугольника, содержащего текст. Затем используется <text> для создания самого элемента текста с id равным "hello".

HTML

HTML также прост, содержащий только два видимых элемента внутри группирующего элемента <div>:

html

<div class="controls">
  <input type="range" id="widthSlider" min="80" max="978" />
  <span id="widthDisplay"></span>
</div>

Элемент <input> типа "range" используется для создания ползунка, который пользователь будет использовать для изменения ширины текста. Элемент <span> с идентификатором "widthDisplay" отображает текущее значение ширины.

JavaScript

Наконец, посмотрим на JavaScript. Он начинается с хранения ссылок на необходимые элементы, используя Document.getElementById():

const widthSlider = document.getElementById("widthSlider");
const widthDisplay = document.getElementById("widthDisplay");
const textElement = document.getElementById("hello");
const baseLength = Math.floor(textElement.textLength.baseVal.value);

widthSlider.value = baseLength;

widthSlider.addEventListener(
  "input",
  (event) => {
    textElement.textLength.baseVal.newValueSpecifiedUnits(
      SVGLength.SVG_LENGTHTYPE_PX,
      widthSlider.valueAsNumber,
    );
    widthDisplay.innerText = widthSlider.value;
  },
  false,
);

widthSlider.dispatchEvent(new Event("input"));

После получения ссылок на элементы, устанавливается обработчик событий, вызывая addEventListener() на ползунке, для получения любых событий input. Эти события будут отправляться каждый раз, когда изменяется значение ползунка, даже если пользователь не остановил его перемещение, чтобы мы могли реагировать на изменение ширины текста.

При возникновении события "input", вызывается newValueSpecifiedUnits(), чтобы установить значение textLength на новое значение ползунка, используя тип единиц интерфейса SVGLength для указания того, что значение представляет пиксели. Обратите внимание, что нам нужно перейти в textLength для получения свойства baseVal; textLength хранится в виде объекта SVGLength, поэтому мы не можем рассматривать его как простое число.

После обновления ширины текста, содержимое поля widthDisplay обновляется с новым значением, и всё готово.

Результат

Вот как выглядит пример. Попробуйте перетащить ползунок, чтобы почувствовать, как это работает.

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # TextElementTextLengthAttribute

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`textLength`	1	12	1.5	15	3	18	4	14	2	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength