textLength

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

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

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

• <text>
• <textPath>
• <tspan>

Пример

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

Числовое значение задаёт длину в единицах текущей системы координат.

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

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

CSS

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

SVG

Начнём с SVG. Он довольно прост: область размером 1000 на 300 пикселей отображается в прямоугольнике размером 10 на 3 сантиметра.

<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> используется для создания самого текстового элемента с "hello" в атрибуте id.

HTML

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

<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"));

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

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

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

Результат

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

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

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

svg.elements.text.textLength

svg.elements.textPath.textLength

svg.elements.tspan.textLength

См. также

• Учебник по SVG: Текст
• SVGAnimatedLength и SVGLength
• <text>