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 --- .../text/index.html" | 211 --------------------- 1 file changed, 211 deletions(-) delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" (limited to 'files/ru/web/svg/элемент/text/index.html') diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" deleted file mode 100644 index d63d1b47dd..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" +++ /dev/null @@ -1,211 +0,0 @@ ---- -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