Последние учебники веб-разработки
 

SVG <Текст>


SVG Text - <text>

<text> элемент используется для определения текста.


Пример 1

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

Я люблю SVG! К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код SVG:

пример

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>
Попробуй сам "

Пример 2

Поворот текста:

К сожалению, ваш браузер не поддерживает встроенный 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> элемент может содержать различное форматирование и положение.

Текст на несколько строк (with the <tspan> element) :

Несколько линий: Первая линия. Вторая линия. К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код SVG:

пример

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
</svg>
Попробуй сам "

Пример 4

Текст как ссылки (with the <a> element) :

Я люблю SVG! К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код SVG:

пример

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3ii.com/svg/default.html" target="_blank">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </a>
</svg>
Попробуй сам "