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/a/index.html | 151 ++++++++++++ files/ru/web/svg/element/animate/index.html | 81 +++++++ files/ru/web/svg/element/animatemotion/index.html | 112 +++++++++ files/ru/web/svg/element/circle/index.html | 109 +++++++++ files/ru/web/svg/element/defs/index.html | 101 ++++++++ files/ru/web/svg/element/ellipse/index.html | 129 +++++++++++ files/ru/web/svg/element/feblend/index.html | 115 ++++++++++ files/ru/web/svg/element/foreignobject/index.html | 119 ++++++++++ files/ru/web/svg/element/g/index.html | 98 ++++++++ files/ru/web/svg/element/image/index.html | 94 ++++++++ files/ru/web/svg/element/index.html | 253 +++++++++++++++++++++ files/ru/web/svg/element/line/index.html | 104 +++++++++ files/ru/web/svg/element/lineargradient/index.html | 105 +++++++++ files/ru/web/svg/element/path/index.html | 98 ++++++++ files/ru/web/svg/element/pattern/index.html | 125 ++++++++++ files/ru/web/svg/element/polygon/index.html | 95 ++++++++ files/ru/web/svg/element/radialgradient/index.html | 108 +++++++++ files/ru/web/svg/element/rect/index.html | 115 ++++++++++ files/ru/web/svg/element/svg/index.html | 119 ++++++++++ files/ru/web/svg/element/text/index.html | 211 +++++++++++++++++ files/ru/web/svg/element/use/index.html | 126 ++++++++++ 21 files changed, 2568 insertions(+) create mode 100644 files/ru/web/svg/element/a/index.html create mode 100644 files/ru/web/svg/element/animate/index.html create mode 100644 files/ru/web/svg/element/animatemotion/index.html create mode 100644 files/ru/web/svg/element/circle/index.html create mode 100644 files/ru/web/svg/element/defs/index.html create mode 100644 files/ru/web/svg/element/ellipse/index.html create mode 100644 files/ru/web/svg/element/feblend/index.html create mode 100644 files/ru/web/svg/element/foreignobject/index.html create mode 100644 files/ru/web/svg/element/g/index.html create mode 100644 files/ru/web/svg/element/image/index.html create mode 100644 files/ru/web/svg/element/index.html create mode 100644 files/ru/web/svg/element/line/index.html create mode 100644 files/ru/web/svg/element/lineargradient/index.html create mode 100644 files/ru/web/svg/element/path/index.html create mode 100644 files/ru/web/svg/element/pattern/index.html create mode 100644 files/ru/web/svg/element/polygon/index.html create mode 100644 files/ru/web/svg/element/radialgradient/index.html create mode 100644 files/ru/web/svg/element/rect/index.html create mode 100644 files/ru/web/svg/element/svg/index.html create mode 100644 files/ru/web/svg/element/text/index.html create mode 100644 files/ru/web/svg/element/use/index.html (limited to 'files/ru/web/svg/element') diff --git a/files/ru/web/svg/element/a/index.html b/files/ru/web/svg/element/a/index.html new file mode 100644 index 0000000000..97c2daf793 --- /dev/null +++ b/files/ru/web/svg/element/a/index.html @@ -0,0 +1,151 @@ +--- +title: a +slug: Web/SVG/Элемент/a +tags: + - SVG +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

SVG элемент <a> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.

+ +

Элемент <a> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Ссылка в фигуре -->
+  <a href="/docs/Web/SVG/Element/circle">
+    <circle cx="50" cy="40" r="35"/>
+  </a>
+
+  <!-- Ссылка в тексте -->
+  <a href="/docs/Web/SVG/Element/text">
+    <text x="50" y="90" text-anchor="middle">
+      &lt;circle&gt;
+    </text>
+  </a>
+</svg>
+ +
/* Так как SVG не предоставляет визуальных стилей по-умолчанию для ссылок,
+   будет лучше задать самостоятельно */
+
+@namespace svg url(http://www.w3.org/2000/svg);
+/* Необходимо выделить только SVG элементы <a>, но не HTML.
+   Смотрите предупреждение ниже */
+
+svg|a:link, svg|a:visited {
+  cursor: pointer;
+}
+
+svg|a text,
+text svg|a {
+  fill: blue; /* Даже для текста SVG использует заливку */
+  text-decoration: underline;
+}
+
+svg|a:hover, svg|a:active {
+  outline: dotted 1px blue;
+}
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+ +
+

Поскольку этот элемент разделяет своё имя с элементом HTML <a>, выбор a через CSS или querySelector может выбрать не тот тип элемента. Попробуйте правило @namespace, чтобы разделять их.

+
+
+ +

Атрибуты

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.
+ Тип: <string> ;Значение по-умолчанию: none;Анимируем: нет
+
{{SVGAttr("href")}}
+
{{Glossary("URL")}} или фрагмент URL для перехода.
+ Тип: <URL> ; Значение по-умолчанию: none; Анимируем: да
+
{{htmlattrxref("hreflang", "a")}}
+
URL на человеческом языке или фрагмент URL для перехода.
+ Тип: <string>; Значение по-умолчанию: none; Анимируем: да
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
Разделённый пробелами список URL при переходе по которым браузер будет отправлять POST запросы с телом PING (в фоне). Обычно используется для трекинга.
+ Тип: <list-of-URLs>; Значение по-умолчанию: none; Анимируем: нет
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
Какой referrer отправить при получении {{Glossary("URL")}}.
+ Тип: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Значение по-умолчанию: none; Анимируем: нет
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
Отношение между целевым объектом и объектом link.
+ Тип: <list-of-Link-Types> ; Значение по-умолчанию: none; Анимируем: да
+
{{SVGAttr("target")}}
+
Где отобразить переход {{Glossary("URL")}}.
+ Тип: _self|_parent|_top|_blank|<name> ; Значение по-умолчанию: _self; Анимируем: да
+
{{htmlattrxref("type", "a")}}
+
{{Glossary("MIME type")}} для ссылки URL.
+ Тип: <string> ; Значение по-умолчанию: none; Анимируем: да
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.
+ Тип: <URL> ; Значение по-умолчанию: none; Анимируем: да
+
+ +

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

+ +
+
Core Attributes
+
Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Document element event attributes, Graphical event attributes
+
Presentation Attributes
+
Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink Attributes
+
Наиболее используемые: {{SVGAttr("xlink:title")}}
+
ARIA Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Интерфейс DOM

+ +

Этот элемент реализует интерфейс SVGAElement.

+ +

Примечания к использованию

+ +

{{svginfo}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Изначальное определение
+ +

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

+ + + +

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

diff --git a/files/ru/web/svg/element/animate/index.html b/files/ru/web/svg/element/animate/index.html new file mode 100644 index 0000000000..90988b58f8 --- /dev/null +++ b/files/ru/web/svg/element/animate/index.html @@ -0,0 +1,81 @@ +--- +title: +slug: Web/SVG/Элемент/animate +tags: + - NeedsUpdate + - SVG + - SVG Animation + - svg анимация +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +

 Тег <animate> может быть помещен внутри какой-то фигуры, например,  <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.

+ +

Использование

+ +

{{svginfo}}

+ +

Пример

+ +

» animate.svg

+ +

Атрибуты

+ +

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

+ + + +

Атрибуты элемента

+ + + +

DOM интерфейс

+ +

Элемент реализует SVGAnimateElement интерфейс .

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('SVG1.1', 'animate.html#AnimateElement', '<animate>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Поддерживаемые браузеры

+ + + +

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

+ +

 

diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..3b1259dcb3 --- /dev/null +++ b/files/ru/web/svg/element/animatemotion/index.html @@ -0,0 +1,112 @@ +--- +title: +slug: Web/SVG/Элемент/animateMotion +tags: + - SVG + - svg анимация + - Элемент +translation_of: Web/SVG/Element/animateMotion +--- +
{{SVGRef}}
+ +

Элемент <animateMotion> вызывает перемещение ссылочного элемента вдоль пути движения.

+ +

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

+ +

{{svginfo}}

+ +

Атрибуты

+ +

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

+ + + +

Собственные атрибуты

+ +
    +
  • {{SVGAttr("calcMode")}}
    • +
  • {{SVGAttr("path")}}
    • +
  • {{SVGAttr("keyPoints")}}
    • +
  • {{SVGAttr("rotate")}}
    • +
  • {{SVGAttr("origin")}}
    • +
+ +

DOM интерфейс

+ +

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

+ +

Пример

+ +

SVG

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg" version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Рисуем серый контур движения с двумя
+       маленькими кружками в ключевых точках -->
+  <path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none"
+        d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" />
+  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
+  <circle cx="110" cy="10" r="3" fill="lightgrey"  />
+
+  <!-- Рисуем красный круг, который будет перемещаться
+       вдоль траектории движения. -->
+  <circle cx="" cy="" r="5" fill="red">
+
+  <!-- Определяем анимацию пути движения -->
+    <animateMotion dur="6s" repeatCount="indefinite">
+      <mpath xlink:href="#theMotionPath"/>
+    </animateMotion>
+  </circle>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample("Пример", 120, 120)}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Без изменений
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

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

+ + + +

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

+ +

Смотрите также

+ +
    +
  • {{SVGElement("mpath")}}
    • +
diff --git a/files/ru/web/svg/element/circle/index.html b/files/ru/web/svg/element/circle/index.html new file mode 100644 index 0000000000..3f1907b3bf --- /dev/null +++ b/files/ru/web/svg/element/circle/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/SVG/Элемент/circle +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

Элемент circle — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.

+ +

Информация

+ +

{{svginfo}}

+ +

Пример

+ + + +
<?xml version="1.0"?>
+<svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="50"/>
+</svg>
+ + + +

» circle.svg

+ +

Атрибуты

+ +

Унаследованные

+ + + +

Особые

+ +
    +
  • {{ SVGAttr("cx") }}
    • +
+ +

Координата центра окружности по оси x.

+ +
    +
  • {{ SVGAttr("cy") }}
    • +
+ +

Координата центра окружности по оси y.

+ +
    +
  • {{ SVGAttr("r") }}
    • +
+ +

Радиус окружности.

+ +

Интерфейс DOM

+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('SVG2', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG1.1')}}Исходное определение
+ +

Поддержка браузерами

+ + + +

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

+ + + +

Смотри также

+ + diff --git a/files/ru/web/svg/element/defs/index.html b/files/ru/web/svg/element/defs/index.html new file mode 100644 index 0000000000..0312b05e34 --- /dev/null +++ b/files/ru/web/svg/element/defs/index.html @@ -0,0 +1,101 @@ +--- +title: +slug: Web/SVG/Элемент/defs +tags: + - NeedsUpdate + - SVG + - Контейнер SVG + - Элемент +translation_of: Web/SVG/Element/defs +--- +
{{SVGRef}}
+ +

SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <defs>. Объекты, созданные внутри элемента <defs> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.

+ +

Создание подобных элементов внутри элемента <defs> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.

+ +

<defs> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.

+ +

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

+ +

{{svginfo}}

+ +

Атрибуты

+ +

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

+ + + +

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

+ +

Нет

+ +

Интерфейс DOM 

+ +

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

+ +

Пример

+ +
<svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="Gradient01">
+      <stop offset="20%" stop-color="#39F" />
+      <stop offset="90%" stop-color="#F3F" />
+    </linearGradient>
+  </defs>
+
+  <rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)" />
+</svg>
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "struct.html#Head", "<defs>")}}{{Spec2("SVG2")}}Без изменений
{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}{{Spec2("SVG1.1")}}Первоначальное определение
+ +

Браузерная совместимость

+ + + +

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

+ +

 

+ +

Связанные темы

+ +
    +
  • {{SVGElement("use")}}
    • +
diff --git a/files/ru/web/svg/element/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..f04083c1e1 --- /dev/null +++ b/files/ru/web/svg/element/ellipse/index.html @@ -0,0 +1,129 @@ +--- +title: +slug: Web/SVG/Элемент/ellipse +tags: + - NeedsUpdate +translation_of: Web/SVG/Element/ellipse +--- +
{{SVGRef}}
+ +

Элемент ellipse — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.

+ +
+

Сам по себе элемент ellipse не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45°), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.

+
+ + + + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="100" cy="50" rx="100" ry="50" />
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, '100%')}}

+ + + +

Атрибуты

+ + + +
+
{{SVGAttr("cx")}}
+
Позиция эллипса по x.
+ Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
+
{{SVGAttr("cy")}}
+
Позиция эллипса по y.
+ Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
+
{{SVGAttr("rx")}}
+
Радиус эллипса по x.
+ Тип значения: auto|<length>|<percentage> ;Значение по умолчанию: auto; Можно анимировать: да
+
{{SVGAttr("ry")}}
+
Радиус эллипса по y.
+ Тип значения: auto|<length>|<percentage> ; Значение по умолчанию: auto; Можно анимировать: да
+
{{SVGAttr("pathLength")}}
+
Этот атрибут позволяет установить длину всего пути.
+ Тип значения: <number> ; Значение по умолчани: нет; Можно анимировать: да
+
+ + +
+

Обратите внимание: Начиная с SVG2, cx, cy, rx и ry это Геометрические свойства. Это означает, что они могут быть использованы как CSS свойства элемента.

+
+ +

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

+
+
Основные атрибуты
+
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты стиля
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Условные атрибуты
+
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Аттрибуты событий
+
Глобальные атрибуты событий, Атрибуты графических событий
+
Атрибуты представления
+
Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA-Атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto,aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label,aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable,aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly,aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ + + + + +

Информация

+ +

{{svginfo}}

+ + + +

Пример

+ +

» ellipse.svg

+ +

Интерфейс DOM

+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG1.1')}}Исходное определение
+ +

Поддержка браузерами

+ + + +

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

+ + + +

Смотри также

+ +
    +
  • {{SVGElement("circle")}}
    • +
diff --git a/files/ru/web/svg/element/feblend/index.html b/files/ru/web/svg/element/feblend/index.html new file mode 100644 index 0000000000..acd3547dcd --- /dev/null +++ b/files/ru/web/svg/element/feblend/index.html @@ -0,0 +1,115 @@ +--- +title: +slug: Web/SVG/Элемент/feBlend +tags: + - фильтры +translation_of: Web/SVG/Element/feBlend +--- +
{{SVGRef}}
+ +

SVG фильтр примитивна  <feBlend> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом  {{SVGAttr("mode")}}.

+ +

Используемый контекст

+ +

{{svginfo}}

+ +

Атрибуты

+ +

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

+ + + +

Специальные атрибуты

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("in2")}}
    • +
  • {{SVGAttr("mode")}}
    • +
+ +

DOM Interface

+ +

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

+ +

Пример

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="spotlight">
+      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+          flood-color="green" flood-opacity="1"/>
+      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
+    </filter>
+  </defs>
+
+  <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#spotlight);"/>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample("Example", 200, 200)}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Filters 1.0", "#feBlendElement", "<feBlend>")}}{{Spec2("Filters 1.0")}}Аутсорсинг режимов наложения на{{SpecName("Compositing", "#ltblendmodegt")}}
{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}{{Spec2("SVG1.1")}}Первое определение
+ +

Поддержка браузерами

+ + + +

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

+ +

Смотрите также

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • SVG tutorial: Filter effects
    • +
diff --git a/files/ru/web/svg/element/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..64e32d019f --- /dev/null +++ b/files/ru/web/svg/element/foreignobject/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/SVG/Элемент/foreignObject +translation_of: Web/SVG/Element/foreignObject +--- +
{{SVGRef}}
+Элемент <foreignObject> SVG позволяет включать другое пространство имен XML.
+В контексте браузера это, скорее всего, XHTML / HTML.
+ +
+ + +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    polygon { fill: black }
+
+    div {
+      color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+  <polygon points="5,5 195,10 185,185 10,195" />
+
+  <!-- Типичный пример использования: встраивание HTML-текста в SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+  <!--
+В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать,
+но это обязательно в контексте документа SVG
+   -->
+    <div xmlns="http://www.w3.org/1999/xhtml">
+    - Смолчал хозяин, да и то, что мог сказать
+    - Мне невдомёк, но во владениях чертога
+    Поможет дом срубить да судьбы вам связать.
+    Не веришь ежли - испроси у Бога...
+    </div>
+  </foreignObject>
+</svg>
+ +

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

+
+ +

Атрибуты

+ +
+
{{SVGAttr("height")}}
+
Этот атрибут определяет высоту прямоугольника.
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("width")}}
+
Этот атрибут определяет ширину прямоугольника.
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("x")}}
+
Этот атрибут определяет координату x контейнера svg.
+ Это не влияет на внешние элементы SVG.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
Этот атрибут определяет координату Y контейнера SVG.
+ Это не влияет на внешние элементы SVG.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +
+

Note: Starting with SVG2 x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

+
+ +

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

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Примечания по использованию

+ +

{{svginfo}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

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

+ + + +

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

diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.html new file mode 100644 index 0000000000..c425f3c5b8 --- /dev/null +++ b/files/ru/web/svg/element/g/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/SVG/Элемент/g +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/g +--- +
{{SVGRef}}
+ +

Элемент g используется для группировки других SVG элементов. Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.

+ +

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

+ +

{{svginfo}}

+ +

Пример

+ +
<svg viewBox="0 0 95 50"
+     xmlns="http://www.w3.org/2000/svg">
+   <g stroke="green" fill="white" stroke-width="5">
+     <circle cx="25" cy="25" r="15"/>
+     <circle cx="40" cy="25" r="15"/>
+     <circle cx="55" cy="25" r="15"/>
+     <circle cx="70" cy="25" r="15"/>
+   </g>
+</svg>
+
+ +

{{EmbedLiveSample("Example",220,130)}}

+ +

Атрибуты

+ +

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

+ + + +

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

+ +

Нет специфичных атрибутов.

+ +

Интерфейс DOM

+ +

Этот элемент реализует  SVGGElement интерейс.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#GElement', '<g>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#Groups', '<g>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Поддержка браузерами

+ + + +

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

+ + + +

Смотрите также:

+ + + +
    +
  • {{SVGElement("use")}}
    • +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("symbol")}}
    • +
  • SVG элемент g
    • +
diff --git a/files/ru/web/svg/element/image/index.html b/files/ru/web/svg/element/image/index.html new file mode 100644 index 0000000000..e417a4ac65 --- /dev/null +++ b/files/ru/web/svg/element/image/index.html @@ -0,0 +1,94 @@ +--- +title: +slug: Web/SVG/Элемент/image +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/image +--- +
{{SVGRef}}
+ +

Элемент <image> позволяет включить растровые изображения в SVG документ.

+ +

Usage context

+ +

{{svginfo}}

+ +

Атрибуты

+ +

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

+ + + +

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

+ +
    +
  • {{SVGAttr("x")}}
    • +
  • {{SVGAttr("y")}}
    • +
  • {{SVGAttr("width")}}
    • +
  • {{SVGAttr("height")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
  • {{SVGAttr("preserveAspectRatio")}}
    • +
+ +

DOM Interface

+ +

This element implements the SVGImageElement interface.

+ +

Пример

+ +

Базовый рендеринг PNG изображения в качестве объекта SVG:

+ +

SVG

+ +
<svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
+</svg>
+
+ +

Результат

+ +

{{EmbedLiveSample("Пример", 250, 260)}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/ru/web/svg/element/index.html b/files/ru/web/svg/element/index.html new file mode 100644 index 0000000000..b65942e344 --- /dev/null +++ b/files/ru/web/svg/element/index.html @@ -0,0 +1,253 @@ +--- +title: Справочник SVG элементов +slug: Web/SVG/Элемент +tags: + - SVG + - SVG Reference + - Руководство +translation_of: Web/SVG/Element +--- +

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

+ +

SVG элементы

+ +
A + +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
  • {{SVGElement("altGlyphDef")}}
    • +
  • {{SVGElement("altGlyphItem")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+B C + +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
  • {{SVGElement("cursor")}}
    • +
+D + +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
  • {{SVGElement("discard")}}
    • +
+E + +
    +
  • {{SVGElement("ellipse")}}
    • +
+F + +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("font")}}
    • +
  • {{SVGElement("font-face")}}
    • +
  • {{SVGElement("font-face-format")}}
    • +
  • {{SVGElement("font-face-name")}}
    • +
  • {{SVGElement("font-face-src")}}
    • +
  • {{SVGElement("font-face-uri")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+G + +
    +
  • {{SVGElement("g")}}
    • +
  • {{SVGElement("glyph")}}
    • +
  • {{SVGElement("glyphRef")}}
    • +
+H + +
    +
  • {{SVGElement("hatch")}}
    • +
  • {{SVGElement("hatchpath")}}
    • +
  • {{SVGElement("hkern")}}
    • +
+I + +
    +
  • {{SVGElement("image")}}
    • +
+J K L + +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+M + +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("mesh")}}
    • +
  • {{SVGElement("meshgradient")}}
    • +
  • {{SVGElement("meshpatch")}}
    • +
  • {{SVGElement("meshrow")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("missing-glyph")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+N O P + +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+Q R + +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+S + +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("solidcolor")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+T + +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+U + +
    +
  • {{SVGElement("unknown")}}
    • +
  • {{SVGElement("use")}}
    • +
+V — Z + +
    +
  • {{SVGElement("view")}}
    • +
  • {{SVGElement("vkern")}}
    • +
+
+ +

Элементы SVG по категориям

+ +

Элементы анимации

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

Базовые фигуры

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Контейнеры

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

Элементы описания

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

Фильтры

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

Элементы шрифта

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

Градиентные элементы

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

Графические элементы

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} 

+ +

Элементы ссылки на графику

+ +

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+ +

Источники света

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} 

+ +

Непрозрачные элементы

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} 

+ +

Элементы сервера печати

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} 

+ +

Отличительные элементы

+ +

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} 

+ +

Элементы формы

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Структурные элементы

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

Элементы текстового контента

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Текстовые контентные дочерние элементы

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Некатегоризированные элементы

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} 

+ +

Смотрите также

+ + + +

 

+ +

 

diff --git a/files/ru/web/svg/element/line/index.html b/files/ru/web/svg/element/line/index.html new file mode 100644 index 0000000000..b7f75c6a96 --- /dev/null +++ b/files/ru/web/svg/element/line/index.html @@ -0,0 +1,104 @@ +--- +title: +slug: Web/SVG/Элемент/line +tags: + - SVG +translation_of: Web/SVG/Element/line +--- +
 {{SVGRef}}
+ +

Элемент <line> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+
+  <!-- Если вы не укажете цвет контура,
+       линия не будет видна -->
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr('x1')}}
+
Определяет координату начальной точки линии по оси x .
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr('x2')}}
+
Определяет координату конечной точки линии по оси x.
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr('y1')}}
+
Определяет координату начальной точки линии по оси y.
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr('y2')}}
+
Определяет координату конечной точки линии по оси y.
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr("pathLength")}}
+
Определяет общую длину пути в пользовательских единицах.
+ Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
+
+ +

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

+ +
+
Основные атрибуты
+
В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты оформления (стилей) 
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Атрибуты условной обработки
+
В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты события
+
Глобальные атрибуты события, Графические атрибуты события
+
Атрибуты презентации
+
В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Атрибуты ARIA
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Поддержка браузерами

+ + + +

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

+ +

 

+ +

Смотрите также:

+ + diff --git a/files/ru/web/svg/element/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..37ab6a334d --- /dev/null +++ b/files/ru/web/svg/element/lineargradient/index.html @@ -0,0 +1,105 @@ +--- +title: +slug: Web/SVG/Элемент/linearGradient +tags: + - NeedsUpdate + - SVG + - SVG градиент + - Справка + - Элемент +translation_of: Web/SVG/Element/linearGradient +--- +
{{SVGRef}}
+ +

Элемент <linearGradient> SVG позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.

+ +

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

+ +

{{svginfo}}

+ +

Атрибуты

+ +

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

+ + + +

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

+ +
    +
  • {{SVGAttr("gradientUnits")}}
    • +
  • {{SVGAttr("gradientTransform")}}
    • +
  • {{SVGAttr("x1")}}
    • +
  • {{SVGAttr("y1")}}
    • +
  • {{SVGAttr("x2")}}
    • +
  • {{SVGAttr("y2")}}
    • +
  • {{SVGAttr("spreadMethod")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

DOM интерфейс

+ +

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

+ +

Пример

+ +
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="MyGradient">
+            <stop offset="5%"  stop-color="green"/>
+            <stop offset="95%" stop-color="gold"/>
+        </linearGradient>
+    </defs>
+
+    <rect fill="url(#MyGradient)"
+          x="10" y="10" width="100" height="100"/>
+</svg>
+ +

{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}

+ +

Характеристики

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

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

+ +
+ + +

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

+
+ +

Смотрите также

+ +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("stop")}}
    • +
diff --git a/files/ru/web/svg/element/path/index.html b/files/ru/web/svg/element/path/index.html new file mode 100644 index 0000000000..7dc97ca989 --- /dev/null +++ b/files/ru/web/svg/element/path/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/SVG/Элемент/path +translation_of: Web/SVG/Element/path +--- +
{{SVGRef}}
+ +

Элемент <path> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/>
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr("d")}}
+
Этот атрибут определяет форму.
+ Тип значения: <string> ; Значеие по умолчанию: ''; Анимирование: Да
+
{{SVGAttr("pathLength")}}
+
Этот атрибут позволяет указывать общую длину в пользовательских единицах.
+ Тип значения: <number> ; Значеие по умолчанию:нет; Анимирование: Да
+
+ +

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

+ +
+
Атрибуты ядра
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты стиля
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Атрибуты условной обработки
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты событий
+
Атрибуты глобальных событий, Атрибуты графических событий
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Использование

+ +

{{svginfo}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикиСтатусКоммент
{{SpecName("SVG Paths", "#PathElement", "<path>")}}{{Spec2("SVG Paths")}}
{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}{{Spec2("SVG1.1")}}Initial definition
+ +

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

+ +

div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.

+ +

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

+ +

Смотрите также

+ +
    +
  • SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • +
  • The MDN SVG "Getting Started" tutorial : Path
    • +
diff --git a/files/ru/web/svg/element/pattern/index.html b/files/ru/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..2d572737d3 --- /dev/null +++ b/files/ru/web/svg/element/pattern/index.html @@ -0,0 +1,125 @@ +--- +title: +slug: Web/SVG/Элемент/pattern +tags: + - SVG +translation_of: Web/SVG/Element/pattern +--- +
{{SVGRef}}
+Элемент <pattern> определяет графический объект, который может быть перерисован с повторяющимися координатами x и y («мозаичным»), чтобы покрыть область.
+ +

+На ссылку <pattern> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других графических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном. 
+ +
 
+ +
+ + +
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
+      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
+    </pattern>
+  </defs>
+
+  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
+  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
+</svg>
+ +

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

+
+ +

Атрибуты

+ +
+
{{SVGAttr("height")}}
+
Этот атрибут определяет высоту плитки шаблона.
+ Value type: <length>|<percentage>; Default value: 0; Animatable: yes
+
{{SVGAttr("href")}}
+
Этот атрибут по умолчанию ссылается на пример шаблона для <pattern>
+ Value type: <URL>; Default value: none; Animatable: yes
+
{{SVGAttr("patternContentUnits")}}
+
Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. 
+ Value type: userSpaceOnUse|objectBoundingBox; Default value: userSpaceOnUse; Animatable: yes +

Сноска: Этот атрибут не действует, если в элементе <pattern> указан атрибут viewBox.

+
+
{{SVGAttr("patternTransform")}}
+
Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.
+ Value type: <transform-list>; Default value: none; Animatable: yes
+
{{SVGAttr("patternUnits")}}
+
Этот атрибут определяет систему координат для атрибутов x, y, width и height. 
+ Value type: userSpaceOnUse|objectBoundingBox; Default value: objectBoundingBox; Animatable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.
+ Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
+
{{SVGAttr("viewBox")}}
+
Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.
+ Value type: <list-of-numbers> ; Default value: none; Animatable: yes
+
{{SVGAttr("width")}}
+
Этот атрибут определяет ширину плитки шаблона.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("x")}}
+
Этот атрибут определяет смещение координаты x мозаичного изображения.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <pattern>.
+ Value type: <URL>; Default value: none; Animatable: yes +

Сноска: Для браузеров, реализующих href, если заданы как href, так и xlink:href, xlink:href будет игнорироваться, используя только href.

+
+
{{SVGAttr("y")}}
+
Этот атрибут определяет смещение координат y мозаичного элемента.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +

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

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink Attributes
+
Most notably: {{SVGAttr("xlink:title")}}
+
+ +

Нотации

+ +

{{svginfo}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
ХарактеристикиСтатусКоммент
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

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

+ + + +

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

diff --git a/files/ru/web/svg/element/polygon/index.html b/files/ru/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..b1baf626a3 --- /dev/null +++ b/files/ru/web/svg/element/polygon/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/SVG/Элемент/polygon +tags: + - SVG +translation_of: Web/SVG/Element/polygon +--- +
{{SVGRef}}
+ +

Элемент <polygon> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.

+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Example of a polygon with the default fill -->
+  <polygon points="0,100 50,25 50,75 100,0" />
+
+  <!-- Example of the same polygon shape with stroke and no fill -->
+  <polygon points="100,100 150,25 150,75 200,0"
+            fill="none" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr('points')}}
+
Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.
+ Тип значения: <number>+ ; Значение по умолчанию: ""; Анимируемый: да
+
{{SVGAttr("pathLength")}}
+
Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.
+ Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
+
+ +

Global attributes

+ +
+
Основные атрибуты
+
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты стилизации
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Условные атрибуты
+
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты событий
+
Атрибуты глобальных событий, Атрибуты графических событий
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG2')}}No change
{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

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

+ + + +

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

+ +

Смотрите также

+ +
    +
  • Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • +
diff --git a/files/ru/web/svg/element/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..04906d4fd5 --- /dev/null +++ b/files/ru/web/svg/element/radialgradient/index.html @@ -0,0 +1,108 @@ +--- +title: +slug: Web/SVG/Элемент/radialGradient +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/radialGradient +--- +
{{SVGRef}}
+ +

Элемент <radialGradient> SVG позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.

+ +

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

+ +

{{svginfo}}

+ +

Атрибуты

+ +

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

+ + + +

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

+ +
    +
  • {{SVGAttr("gradientUnits")}}
    • +
  • {{SVGAttr("gradientTransform")}}
    • +
  • {{SVGAttr("cx")}}
    • +
  • {{SVGAttr("cy")}}
    • +
  • {{SVGAttr("r")}}
    • +
  • {{SVGAttr("fx")}}
    • +
  • {{SVGAttr("fy")}}
    • +
  • {{SVGAttr("fr")}}
    • +
  • {{SVGAttr("spreadMethod")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

DOM интерфейс

+ +

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

+ +

Пример

+ +

SVG

+ +
<svg width="120" height="120" viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="exampleGradient">
+      <stop offset="10%" stop-color="gold"/>
+      <stop offset="95%" stop-color="green"/>
+    </radialGradient>
+  </defs>
+
+  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample("Example", 120, 120)}}

+ +

Характеристики

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

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

+ + + +

 

+ +

Смотрите также

+ +
    +
  • {{SVGElement("linearGradient")}}
    • +
diff --git a/files/ru/web/svg/element/rect/index.html b/files/ru/web/svg/element/rect/index.html new file mode 100644 index 0000000000..8e4b7c9af7 --- /dev/null +++ b/files/ru/web/svg/element/rect/index.html @@ -0,0 +1,115 @@ +--- +title: +slug: Web/SVG/Элемент/rect +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

<rect>  - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.

+ +

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

+ + + + + + + + + + + + + + + + +
КатегорияПростая фигура, Графический элемент
Разрешенное содержимоеЛюбое количество указанных элементов в любом порядке:
+ Элементы анимации »
+ Элементы описания »
Нормативный документSVG 1.1 (2ое издание)
+ +

Пример

+ +

Простой пример использования rect

+ +

 

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

 

+ +

» rect-1.svg

+ +

<rect> со скругленными углами

+ +

 

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10"
+        width="100" height="100"
+        rx="15" ry="15"/>
+
+</svg>
+ +

» rect-2.svg

+ +

Атрибуты

+ +

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

+ + + +

Специальные атрибуты

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("rx") }}
    • +
  • {{ SVGAttr("ry") }}
    • +
+ +

DOM Интерфейс

+ +

Данный элемент реализует интерфейс SVGRectElement .

+ +

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

+ +

 

+ + + +

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

+ +

 

+ +

Смотрите также

+ +
    +
  • {{ SVGElement("path") }}
    • +
diff --git a/files/ru/web/svg/element/svg/index.html b/files/ru/web/svg/element/svg/index.html new file mode 100644 index 0000000000..12e37bee9d --- /dev/null +++ b/files/ru/web/svg/element/svg/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/SVG/Элемент/svg +translation_of: Web/SVG/Element/svg +--- +
{{SVGRef}}
+ +

Элемент svg является контейнером, который определяет новую систему координат и область просмотра. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.

+ +
+

Примечание. Атрибут xmlns требуется только для самого внешнего элемента svg документов SVG. Это не нужно для внутренних элементов svg или внутри документов HTML.

+
+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
+  <circle cx="50" cy="50" r="40" />
+  <circle cx="150" cy="50" r="4" />
+
+  <svg viewBox="0 0 10 10" x="200" width="100">
+    <circle cx="5" cy="5" r="4" />
+  </svg>
+</svg>
+ +

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

+
+ +

Атрибуты

+ +
+
{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}
+
The minimum SVG language profile that the document requires.
+ Value type: <string> ; Default value: none; Animatable: no
+
{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}
+
Язык сценариев по умолчанию, используемый фрагментом SVG.
+ Value type: <string> ; Default value: application/ecmascript; Animatable: no
+
{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}
+
Язык таблицы стилей по умолчанию, используемый фрагментом SVG.
+ Value type: <string> ; Default value: text/css; Animatable: no
+
{{SVGAttr("height")}}
+
Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.)
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
+ Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
+
{{SVGAttr("version")}} {{deprecated_inline('svg2')}}
+
Какая версия SVG используется для внутреннего содержимого элемента.
+ Value type: <number> ; Default value: none; Animatable: no
+
{{SVGAttr("viewBox")}}
+
Координаты области просмотра SVG для текущего фрагмента SVG.
+ Value type: <list-of-numbers> ; Default value: none; Animatable: yes
+
{{SVGAttr("width")}}
+
Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.)
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("x")}}
+
The displayed x coordinate of the svg container. No effect on outermost svg elements.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
The displayed y coordinate of the svg container. No effect on outermost svg elements.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +
+

Примечание. Начиная с SVG2, x, y, width и height являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.

+
+ +

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

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Примечания по использованию

+ +

{{svginfo}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Кросс-браузерность

+ + + +

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

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")}}
    • +
diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.html new file mode 100644 index 0000000000..12d7007932 --- /dev/null +++ b/files/ru/web/svg/element/use/index.html @@ -0,0 +1,126 @@ +--- +title: +slug: Web/SVG/Элемент/use +tags: + - SVG + - SVG Графика + - Ссылка + - Элемент +translation_of: Web/SVG/Element/use +--- +
{{SVGRef}}
+ +

Элемент <use> берёт элементы из SVG-документа и дублирует их где-то еще.

+ +
+ + +
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
+  <use href="#myCircle" x="10" fill="blue"/>
+  <use href="#myCircle" x="20" fill="white" stroke="red"/>
+  <!--
+  В данном случае атрибут stroke="red" будет игнорироваться, так как
+  ранее он был задан непосредственно для фигуры круга с id "myCircle".
+  Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не
+  переопределяют значения, заданные у предка.
+  Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke".
+  -->
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +

Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент use, подобно элементам <template> в HTML 5.
+
+ Большинство атрибутов use не переопределяют те, что уже заданы у элемента, на который use ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). Только атрибуты {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}} и {{SVGAttr("href")}} элемента use будут переопределять те, что были заданы у элемента, на который use ссылается. Однако к элементу use будут применены любые другие атрибуты, не заданные у элемента, на который use ссылается.
+
+ Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании CSS для стилизации элемента use и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование CSS-наследования.
+
+ По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.

+ +
+

Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее,  на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

+
+ +

Атрибуты

+ +
+
{{SVGAttr("href")}}
+
Ссылка на элемент/фрагмент, который нужно продублировать.
+ Тип значения: <URL> ; Значение по умолчанию: none; Анимируется: да
+
{{SVGAttr("xlink:href")}}
+
{{Deprecated_Header("SVG2")}}<IRI>-ссылка на элемент/фрагмент, который нужно продублировать.
+ Тип значения: <IRI> ; Значение по умолчанию: none; Анимируется: да
+
{{SVGAttr("x")}}
+
Координата "x" элемента use.
+ Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
+
{{SVGAttr("y")}}
+
Координата "y" элемента use.
+ Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
+
{{SVGAttr("width")}}
+
Ширина элемента use.
+ Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
+
{{SVGAttr("height")}}
+
Высота элемента use.
+ Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
+
+ +
+

Примечание: Начиная с SVG2, x, y, width, и height являются Свойствами Геометрии, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.

+
+ +

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

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты Событий
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA Атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
XLink Атрибуты
+
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}
+
+ +

Примечание по использованию

+ +

{{svginfo}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Браузерная совместимость

+ + + +

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

-- cgit v1.2.3-54-g00ecf