Текст SVG <text>

Элемент <text> SVG используется для рисования текста в SVG-изображениях. В svg используется элемент <text> для рисования текста, вращения текста, многострочного текста, текста с гиперссылкой и т.д.

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

　　　　　　<h1>SVG　Текст</h1>
　　　　　　<svg　width="550"　height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text　x="40"　y="23"　>Текст:　</text>
　　　　　　　　　　　　<text　x="40"　y="40"　fill="rgb(121,0,121)">ru.oldtoolbag.com　Основное обучение　</text>
　　　　　　　　　</g>　
　　　　　　</svg>

Эффект после выполнения:

SVG Текст

Объяснение использования

x: он определяет положение верхнего левого угла текста.

y: она определяет верхнее положение текста.

width: определяет ширину.

height: определяет высоту.

fill: свойство fill используется для определения цвета заливки.

Текст с вращением

Он используется для создания текста с вращением.

<svg　height="100"　width="200">
　　<text　x="0"　y="15"　fill="red"　transform="rotate(30　20,40)">ru.oldtoolbag.com</text>
</svg>

Эффект после выполнения:

Объяснение использования

x: определяет положение верхнего левого угла.

y: определяет верхнее положение.

width: определяет ширину.

height: определяет высоту.

fill: свойство fill используется для определения цвета заливки.

Многострочный текст

Он используется для создания многострочного текста. Используя элемент <tspan>, можно расположить элемент <text> в любом количестве подгрупп.

<svg　width="570"　height="100">
　　<g>
　　<text　x="40"　y="23"　>Многострочный текст:　</text>
　　<text　x="40"　y="40"　fill="rgb(121,0,121)">ru.oldtoolbag.com
　　　<tspan　x="40"　y="60"　font-weight="bold">　Онлайн базовое обучение.　</tspan>
　　　</text>
　　</g>
　</svg>

Эффект после выполнения:

Объяснение использования

x: определяет положение верхнего левого угла.

y: определяет верхнее положение.

width: определяет ширину.

height: определяет высоту.

fill: свойство fill используется для определения цвета заливки.

Текст гиперссылки

Он используется для создания текста с гиперссылкой.

　　　　　　<svg　width="500"　height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text　x="20"　y="10"　>Text　as　Link:　</text>
　　　　　　　　　
　　　　　　　　　　　　<a　xlink:href="https://ru.oldtoolbag.com/svg-tutorial"　target="_blank">
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40"</text>　
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40">ru.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

Эффект после выполнения:

Объяснение использования

x: определяет положение верхнего левого угла.

y: определяет верхнее положение.

width: определяет ширину.

height: определяет высоту.

fill: свойство fill используется для определения цвета заливки.