From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/svg/tutorial/texts/index.html | 74 ++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/ru/web/svg/tutorial/texts/index.html (limited to 'files/ru/web/svg/tutorial/texts') diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..29170aae1e --- /dev/null +++ b/files/ru/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Текст +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
+ +

 

+ +

Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.

+ +

Основы

+ +

В getting started мы уже видели, что элемент text может использоваться для размещения произвольного текста в SVG документах:

+ +
<text x="10" y="10">Hello World!</text>
+
+ +

Атрибуты x и y задают расположение текста на экране. Атрибут text-anchor, который может иметь значение start, middle, end или inherit, определяет в каком направлении выравнивать текст относительно заданной точки. 
+
+ Как и для фигур, тексту можно задать цвет с помощью атрибута fill и обводку, используя атрибут stroke. Оба могут быть использованы с gradient и pattern элементами, что делает простое изменение цвета текста в SVG очень мощным по сравнению с CSS 2.1.

+ +

Настройка свойств шрифта

+ +

Шрифт, в котором отображается текст очень важен. SVG предлагает набор атрибутов (многие из которых похожи на их CSS аналоги), позволяющий настроить шрифт.  Каждое из следующих свойств может быть установлено как атрибут или с помощью CSS декларации: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing и text-decoration.

+ +

Другие текстовые элементы

+ +

tspan

+ +

Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в text элемент или в другой tspan элемент. Примером является выделение одного слова в предложении красным цветом. 

+ +
<text>
+  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
+</text>
+
+ +

Элемент tspan имеет следующие атрибуты:
+
+ x
+ Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по-умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу tspan.

+ +

dx
+ Задает смещение по горизонтали dx относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.

+ +

Аналогично, для вертикального перемещения текста имеются y и dy атрибуты.
+
+ rotate
+ Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.
+
+ textLength
+ Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.

+ +

tref

+ +

Элемент tref позволяет ссылаться на уже существующий текст, эффективно копируя его на свое место. Вы можете использовать атрибут xlink:href чтобы указать на  элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. 

+ +
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xlink:href="#example" />
+</text>
+
+ +

textPath

+ +

Этот атрибут извлекает path, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.

+ +
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
+<text>
+  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
+</text>
+ +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
-- cgit v1.2.3-54-g00ecf