Текст в SVG

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 14
Автор
Рек. время прохождения 3 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
В этом модуле мы погрузимся в мир векторной графики и научимся работать с одним из ключевых компонентов SVG — текстом. Здесь вы попрактикуетесь в добавлении текста на ваши SVG-изображения, его точном позиционировании и применении различных стилей. Мы начнем с основ, таких как создание простой текстовой метки, и постепенно перейдем к более сложным техникам: выравниванию, вращению, стилизации отдельных фрагментов и даже размещению текста вдоль криволинейного пути. Эти упражнения дадут вам практический опыт работы с элементами `<text>`, `<tspan>` и `<textPath>`, а также их основными атрибутами. Вместо сухой теории вы сразу увидите результат своего кода и освоите искусство типографики в SVG.
Список тем

Создание простого текста в SVG

id: 37915_svg-text-01

Ваша первая задача — создать базовый SVG-элемент и добавить в него простую текстовую строку. В результате на экране должна появиться надпись «Привет, SVG!».

CSS
svg {
  border: 1px solid #eee;
}

text {
  font-family: sans-serif;
  font-size: 20px;
}
HTML
<svg width="300" height="50">
  <input1 x="10" y="30">Привет, SVG!</input1>
</svg>
Для добавления текста в SVG используется тег `<text>`. Его нужно поместить внутрь тега `<svg>`. Не забудьте указать координаты текста с помощью атрибутов `x` и `y`, чтобы он был виден.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Позиционирование текста

id: 37915_svg-text-02

Теперь давайте научимся управлять положением текста. Используйте атрибуты для задания координат, чтобы разместить текст в определенной точке SVG-холста. Надпись должна быть расположена по координатам x=20 и y=40.

CSS
svg {
  border: 1px solid #eee;
}

text {
  font-family: sans-serif;
  font-size: 18px;
}
HTML
<svg width="300" height="60">
  <text input1="20" input2="40">Текст в нужном месте</text>
</svg>
Для позиционирования текста по горизонтали используется атрибут `x`, а по вертикали — `y`. Укажите их прямо в теге `<text>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация текста: цвет и размер

id: 37915_svg-text-03

Текст не обязательно должен быть черным. Измените цвет и размер шрифта с помощью специальных атрибутов. Сделайте текст синим (`blue`) и установите размер шрифта равным 24.

CSS
svg {
  border: 1px solid #eee;
}
HTML
<svg width="300" height="50">
  <text x="10" y="35" input1="blue" input2="24">Синий и большой</text>
</svg>
В SVG для стилизации можно использовать презентационные атрибуты. За цвет заливки отвечает атрибут `fill`, а за размер шрифта — `font-size`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Применение CSS-класса к тексту

id: 37915_svg-text-04

Стили можно выносить в CSS для удобства. Примените к текстовому элементу готовый CSS-класс `important-text`, чтобы изменить его внешний вид.

CSS
svg {
  border: 1px solid #eee;
}

.important-text {
  font-family: 'Georgia', serif;
  font-size: 22px;
  fill: darkred;
  font-style: italic;
}
HTML
<svg width="300" height="50">
  <text x="15" y="35" input1="important-text">Текст со стилем из CSS</text>
</svg>
Как и в обычном HTML, для применения CSS-класса к SVG-элементу используется атрибут `class`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выравнивание текста

id: 37915_svg-text-05

Выровняйте текст относительно точки, заданной координатами `x` и `y`. Красная пунктирная линия показывает координату `x=150`. Отцентрируйте верхнюю надпись и выровняйте нижнюю по правому краю относительно этой линии.

CSS
svg {
  border: 1px solid #eee;
}
line {
  stroke: red;
  stroke-dasharray: 4 2;
}
text {
  font-size: 18px;
}
HTML
<svg width="300" height="80">
  <line x1="150" y1="10" x2="150" y2="70" />
  <text x="150" y="30" text-anchor="input1">По центру</text>
  <text x="150" y="60" text-anchor="input2">По правому краю</text>
</svg>
Для управления выравниванием текста используется атрибут `text-anchor`. Он может принимать значения `start` (по умолчанию), `middle` (по центру) и `end` (по правому краю).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вращение текста

id: 37915_svg-text-06

Текст в SVG можно не только перемещать, но и трансформировать. Используйте специальный атрибут, чтобы повернуть надпись на -25 градусов.

CSS
svg {
  border: 1px solid #eee;
  height: 100px;
}
text {
  font-size: 20px;
}
HTML
<svg width="300" height="100">
  <text x="100" y="80" input1="rotate(-25)">Повернутый текст</text>
</svg>
Для любых трансформаций, включая вращение, используется атрибут `transform`. Чтобы повернуть элемент, используйте функцию `rotate()`. Например, `transform="rotate(-25)"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация части текста с помощью tspan

id: 37915_svg-text-07

Иногда нужно выделить только часть текста, например, сделать одно слово жирным и красным. Для этого внутри элемента `<text>` можно использовать другой тег. Выделите слово «важная» с помощью этого тега.

CSS
svg {
  border: 1px solid #eee;
}
text {
  font-size: 18px;
}
HTML
<svg width="350" height="50">
  <text x="10" y="30">
    Это <input1 font-weight="bold" fill="red">важная</input1> часть текста.
  </text>
</svg>
Чтобы стилизовать фрагмент текста, оберните его в тег `<tspan>`. Этот тег поддерживает все те же атрибуты стилизации, что и `<text>`, например `font-weight` и `fill`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Точное смещение tspan

id: 37915_svg-text-08

С помощью `<tspan>` можно не только менять стиль, но и смещать части текста относительно их обычной позиции. Используйте атрибуты `dx` и `dy`, чтобы создать эффект, похожий на верхний и нижний индексы.

CSS
svg {
  border: 1px solid #eee;
}
text {
  font-size: 24px;
}
HTML
<svg width="300" height="60">
  <text x="20" y="40">
    Формула: H<tspan font-size="16" input1="-0.6em">2</tspan>O
    и E=mc<tspan font-size="16" input2="-0.8em">2</tspan>
  </text>
</svg>
Атрибуты `dx` (смещение по X) и `dy` (смещение по Y) задают относительное смещение для элемента `<tspan>` от его текущей позиции в текстовой строке.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Текст вдоль кривой

id: 37915_svg-text-09

Одна из самых мощных возможностей SVG — размещение текста вдоль любого пути. Используйте специальный тег, чтобы заставить текст следовать по предопределенной кривой с `id="myPath"`.

CSS
svg {
  border: 1px solid #eee;
}
path {
  fill: none;
  stroke: lightblue;
}
text {
  font-size: 16px;
}
HTML
<svg width="350" height="150">
  <defs>
    <path id="myPath" d="M20,75 Q175,0 330,75"></path>
  </defs>
  <text>
    <input1 input2="#myPath">
      Этот текст следует по кривой...
    </input1>
  </text>
</svg>
Для размещения текста вдоль пути используется тег `<textPath>`. Он помещается внутрь тега `<text>`. Чтобы связать его с путем, используется атрибут `href` (или `xlink:href` в старых версиях), который указывает на `id` нужного элемента `<path>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Смещение текста на пути

id: 37915_svg-text-10

Текст на кривой не обязательно должен начинаться с ее начала. Используйте атрибут, чтобы сместить начальную точку текста на 25% от общей длины пути.

CSS
svg {
  border: 1px solid #eee;
}
path {
  fill: none;
  stroke: lightgrey;
}
text {
  font-size: 16px;
}
HTML
<svg width="350" height="150">
  <defs>
    <path id="myCurve" d="M20,75 C 100,150 250,0 330,75"></path>
  </defs>
  <use href="#myCurve" />
  <text>
    <textPath href="#myCurve" input1="25%">
      Текст со смещением
    </textPath>
  </text>
</svg>
У тега `<textPath>` есть атрибут `startOffset`, который позволяет сдвинуть начало текста вдоль пути. Значение можно задавать в процентах (например, `"25%"`) или в абсолютных единицах.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру