НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

En

SVG <text>


SVG Текст - <text>

Елемент <text> використовується для визначення тексту.


Приклад 1

Написати текст:

Мені подобається SVG! На жаль, ваш браузер не підтримує вбудований SVG.

Ось код SVG:

Приклад

<svg height="30" width="200">
  <text x="0" y="15" fill="red">Мені подобається SVG!</text>
</svg>
Спробуйте самі »

Приклад 2

Поверніть текст:

I Love SVG На жаль, ваш браузер не підтримує вбудований SVG.

Ось код SVG:

Приклад

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I Love SVG</text>
</svg>
Спробуйте самі »

Приклад 3

Елемент <text> можна впорядкувати в будь-яку кількість підгруп за допомогою елементу <tspan>. Кожен елемент <tspan> може містити різне форматування та позицію.

Текст у кілька рядків (з елементом <tspan>:

Кілька рядків: Перший рядок. Другий рядок. На жаль, ваш браузер не підтримує вбудований SVG.

Ось код SVG:

Приклад

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Кілька рядків:
    <tspan x="10" y="45">Перший рядок.</tspan>
    <tspan x="10" y="70">Другий рядок.</tspan>
  </text>
</svg>
Спробуйте самі »

Приклад 4

Текст як посилання (з елементом <a>):

Мені подобається SVG! На жаль, ваш браузер не підтримує вбудований SVG.

Ось код SVG:

Приклад

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://www.w3schools.com/graphics/" target="_blank">
    <text x="0" y="15" fill="red">Мені подобається SVG!</text>
  </a>
</svg>
Спробуйте самі »