From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- files/ru/web/svg/element/text/index.html | 211 +++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 files/ru/web/svg/element/text/index.html (limited to 'files/ru/web/svg/element/text/index.html') diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html new file mode 100644 index 0000000000..d63d1b47dd --- /dev/null +++ b/files/ru/web/svg/element/text/index.html @@ -0,0 +1,211 @@ +--- +title: +slug: Web/SVG/Элемент/ +tags: + - NeedsUpdate + - SVG + - SVG text +translation_of: Web/SVG/Element/text +--- +
{{SVGRef}}
+ +

SVG элемент <text> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <text> можно применить градиент, шаблон, окантовку, маску или фильтр.

+ +

Текст не будет отображаться, если он не находится внутри SVG элемента <text>. Это отличается от сокрытия по умолчанию, поскольку установка свойства display не отображает текст.

+ +

Пример

+ +
+ + +
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .small { font: italic 13px sans-serif; }
+    .heavy { font: bold 30px sans-serif; }
+
+    /* Обратите внимание, что цвет текста задается с помощью        *
+     * fill свойства, а свойство color используется только для HTML */
+    .Rrrrr { font: italic 40px serif; fill: red; }
+  </style>
+
+  <text x="20" y="35" class="small">Мой</text>
+  <text x="60" y="35" class="heavy">кот</text>
+  <text x="60" y="55" class="small">очень</text>
+  <text x="100" y="55" class="Rrrrr">Сердит!</text>
+</svg>
+
+
+ +

{{EmbedLiveSample('Пример', 150, '100%')}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфические атрибуты

+ +
    +
  • {{SVGAttr("х")}}
  • +
  • {{SVGAttr("у")}}
  • +
  • {{SVGAttr("dх")}}
  • +
  • {{SVGAttr("dy")}}
  • +
  • {{SVGAttr("rotate")}}
  • +
  • {{SVGAttr("textLength")}}
  • +
  • {{SVGAttr("text-anchor")}}
  • +
  • {{SVGAttr("lengthAdjust")}}
  • +
+ +

Интерфейс DOM

+ +

Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.

+ +

Примеры

+ +

Основы использования элемента <text>

+ +

SVG

+ +
+
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .mal { font: italic 16px sans-serif; }
+    .hey { font: bold 26px sans-serif; fill: #6de;}
+  </style>
+  <text x="0" y="68" class="mal">- Привет,</text>
+  <text x="110" y="40" class="hey">Сахалин!</text>
+</svg>
+
+
+ +

Результат

+ +

{{EmbedLiveSample('SVG', 150, '100%')}}

+ +

Изменение направления написания текста.

+ +

Направление написания SVG-текста можно сменить на обратное, применив трансформацию.

+ +

SVG

+ +
+
+
+<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);}
+    .hey {font: bold 26px sans-serif; fill: #6de;}
+  </style>
+  <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)">
+    Пример ротации</text>
+  <text x="180" y="40" class="hey">SVG-текста.</text>
+</svg>
+
+
+
+
+ +

Результат

+ +

{{EmbedLiveSample('Реверс', 200, '100%')}}

+ +

Цвет текста

+ +

Цвет текста в SVG-элементе <text> может быть изменён посредством свойства fill="[color]" внутри элемента <text>.

+ +

SVG

+ +
+
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .gri {font: italic 16px sans-serif; fill: #6dd;}
+      .red {font: bold 26px sans-serif; fill: #d66;}
+    </style>
+    <text class="gri" x="10" y="30">Цвет текста</text>
+    <text class="red" x="120" y="30">SVG.</text>
+</svg>
+
+
+ +

Результат

+ +

{{EmbedLiveSample('SVG_3', 200, '100%')}}

+ +

Применение CSS-стилей к содержимому элемента <text>.

+ +

Содержимое SVG элемента <text> может быть стилизовано как обычный текст в HTML.

+ +

SVG

+ +
+
  <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .stil {font: italic 16px sans-serif;}
+      .list {font: bold 26px sans-serif;}
+    </style>
+    <text class="stil" x="10" y="30">Стиль текста</text>
+    <text class="list" x="140" y="30">SVG.</text>
+</svg>
+
+
+ +

Результат

+ +

{{EmbedLiveSample('SVG_4', 200, '100%')}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('SVG2', 'text.html#TextElement', '<text>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

Таблица составлена по информации из этого источника.

+ +

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

+ + + +

{{Compat("svg.elements.text")}}

+ +

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

+ +

{{Svginfo}}

+ +

Связь

+ +
    +
  • {{SVGElement("tref")}}
  • +
  • {{SVGElement("tspan")}}
  • +
  • {{SVGElement("altGlyph")}}
  • +
-- cgit v1.2.3-54-g00ecf