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/attribute/text-anchor/index.html | 107 ++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 files/ru/web/svg/attribute/text-anchor/index.html (limited to 'files/ru/web/svg/attribute/text-anchor') diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html new file mode 100644 index 0000000000..4a034cfde2 --- /dev/null +++ b/files/ru/web/svg/attribute/text-anchor/index.html @@ -0,0 +1,107 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/text-anchor +translation_of: Web/SVG/Attribute/text-anchor +--- +

« Справочник SVG Аттрибутов

+ +

Атрибут text-anchor используется для выравнивания
+ (start-, middle- или end-выравнивание) текстовой строки относительно заданной точки.

+ +

Атрибут text-anchor применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }}  атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента. 

+ +

Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.

+ +

Контекст использования

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
Значениеstart | middle | end | inherit
АнимацияДа
ДокументSVG 1.1 (2nd Edition)
+ +
+
start
+
+

Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиаского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.

+
+
middle
+
+

Отрисованные символы  выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка
+ между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой
+ позиции.)

+
+
end
+
Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно
+ правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.
+
Примечание
+
В IE-11 атрибут text-anchor не имеет эффекта при привязке текста к заданному пути path посредством тега textPath.
+ В приведенном ниже примере тег path использовался только лишь для отрисовки линий и с расположением текста никак не связан.
+
+ +

Пример

+ +
<html>
+<head>
+    <meta charset="utf-8">
+    <title>текст в якорях</title>
+</head>
+<body>
+<div style="background-color:burlywood; width:866px;height:444px;display:flex;">
+    <div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;">
+        <svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1">
+            <!-- Материализация якорей -->
+            <path d="M50, 5 L50,95
+             M20,20 L80,20
+             M20,50 L80,50
+             M20,80 L80,80" stroke="grey"/>
+
+            <!-- Якоря в действии -->
+            <text text-anchor="start"   x="50" y="20">some start</text>
+            <text text-anchor="start"   x="50" y="35">start</text>
+
+            <text text-anchor="middle"  x="50" y="55">some middle</text>
+            <text text-anchor="middle"  x="50" y="70">middle</text>
+
+            <text text-anchor="end"     x="50" y="85">some end</text>
+            <text text-anchor="end"     x="50" y="100">end</text>
+        </svg>
+    </div>
+</div>
+</body>
+</html>
+ +

Песочницы

+ +

{{ EmbedLiveSample('Пример','400','400') }}

+ + + +

Элементы

+ +

Следующие элементы могут использовать  text-anchor атрибут

+ + + +

Совместимость браузера

+ + + +

{{Compat("svg.attributes.presentation.text-anchor")}}

-- cgit v1.2.3-54-g00ecf