<use> - SVG

<use>
=====

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

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<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>
```

Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент `use`, подобно элементам `<template>` в HTML 5.

Большинство атрибутов `use` **не** переопределяют те, что уже заданы у элемента, на который `use` ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). **Только** атрибуты `x`, `y`, `width`, `height (en-US)` и `href (en-US)` элемента `use` будут переопределять те, что были заданы у элемента, на который `use` ссылается. Однако к элементу `use` будут применены любые другие атрибуты, не заданные у элемента, на который `use` ссылается.

Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании CSS для стилизации элемента `use` и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование CSS-наследования.

По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов `use` и могут отказаться загружать URL другого источника в атрибуте `href (en-US)`.

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

Атрибуты
--------

`href (en-US)`

 Ссылка на элемент/фрагмент, который нужно продублировать.
 *Тип значения*: **<URL>** ; *Значение по умолчанию*: `none`; *Анимируется*: **да**

`xlink:href (en-US)`

**SVG2:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

<IRI>-ссылка на элемент/фрагмент, который нужно продублировать.
 *Тип значения*: **<IRI>** ; *Значение по умолчанию*: `none`; *Анимируется*: **да**

`x`

 Координата "x" элемента `use`.
 *Тип значения*: **<coordinate>** ; *Значение по умолчанию*: `0`; *Анимируется*: **да**

`y`

 Координата "y" элемента `use`.
 *Тип значения*: **<coordinate>** ; *Значение по умолчанию*: `0`; *Анимируется*: **да**

`width`

 Ширина элемента `use`.
 *Тип значения*: **<length>** ; *Значение по умолчанию*: `0`; *Анимируется*: **да**

`height (en-US)`

 Высота элемента `use`.
 *Тип значения*: **<length>** ; *Значение по умолчанию*: `0`; *Анимируется*: **да**

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

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

Core Attributes

Most notably: `id`, `tabindex (en-US)`

Styling Attributes
`class`, `style (en-US)`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Атрибуты Событий

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

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 Атрибуты
`xlink:href (en-US)`, `xlink:title (en-US)`
Примечание по использованию
---------------------------

|  |  |
| --- | --- |
| Категории | Графические элементы, Элементы графики, Структурный элемент |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описания |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # UseElement |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<svg> - SVG

<svg>
=====

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

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

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```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>
```

Атрибуты
--------

`baseProfile (en-US)`
Устарело

 The minimum SVG language profile that the document requires.
 *Value type*: **<string>** ; *Default value*: none; *Animatable*: **no**

`contentScriptType`
Устарело

 Язык сценариев по умолчанию, используемый фрагментом SVG.
 *Value type*: **<string>** ; *Default value*: `application/ecmascript`; *Animatable*: **no**

`contentStyleType`
Устарело

 Язык таблицы стилей по умолчанию, используемый фрагментом SVG.
 *Value type*: **<string>** ; *Default value*: `text/css`; *Animatable*: **no**

`height (en-US)`

 Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.)
 *Value type*: **<length>** (en-US)|**<percentage>** (en-US) ; *Default value*: `auto`; *Animatable*: **yes**

`preserveAspectRatio (en-US)`

 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**

`version (en-US)`
Устарело

 Какая версия SVG используется для внутреннего содержимого элемента.
 *Value type*: **<number> (en-US)** ; *Default value*: none; *Animatable*: **no**

`viewBox`

 Координаты области просмотра SVG для текущего фрагмента SVG.
 *Value type*: **<list-of-numbers> (en-US)** ; *Default value*: none; *Animatable*: **yes**

`width`

 Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.)
 *Value type*: **<length>** (en-US)|**<percentage>** (en-US) ; *Default value*: `auto`; *Animatable*: **yes**

`x`

 The displayed x coordinate of the svg container. No effect on outermost `svg` elements.
 *Value type*: **<length>** (en-US)|**<percentage>** (en-US) ; *Default value*: `0`; *Animatable*: **yes**

`y`

 The displayed y coordinate of the svg container. No effect on outermost `svg` elements.
 *Value type*: **<length>** (en-US)|**<percentage>** (en-US) ; *Default value*: `0`; *Animatable*: **yes**

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

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

Core Attributes

Most notably: `id`, `tabindex (en-US)`

Styling Attributes (en-US)
`class`, `style (en-US)`
Conditional Processing Attributes (en-US)

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

Global event attributes (en-US), Graphical event attributes (en-US), Document event attributes (en-US), Document element event attributes (en-US)

Presentation Attributes (en-US)

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

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`

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

|  |  |
| --- | --- |
| Категории | Элемент-контейнер, Структурный элемент |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияЭлементы фигурыСтруктурные элементыЭлементы градиента`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>` (en-US), `<mask>` (en-US), `<pattern>`, `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>`, `<view>` (en-US) |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # NewDocument |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<foreignObject> - SVG

<foreignObject>
===============

 Элемент **`<foreignObject>`** SVG позволяет включать другое пространство имён XML.
 В контексте браузера это, скорее всего, XHTML / HTML.
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```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>
```

Атрибуты
--------

`height (en-US)`

 Этот атрибут определяет высоту прямоугольника.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`width`

 Этот атрибут определяет ширину прямоугольника.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`x`

 Этот атрибут определяет координату x контейнера svg.
 Это не влияет на внешние элементы SVG.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`y`

 Этот атрибут определяет координату Y контейнера SVG.
 Это не влияет на внешние элементы SVG.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

**Примечание:** 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: `id`, `tabindex (en-US)`

Styling Attributes
`class`, `style (en-US)`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

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`

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

|  |  |
| --- | --- |
| Категории | Нет |
| Разрешённый контент | Любые элементы и символы |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


a - SVG

a
=

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

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

Пример
------
```

@namespace svg url(http://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}
```

```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"><circle></text>
  </a>
</svg>
```

```js
/\* Так как 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;
}
```

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

Атрибуты
--------

`download`
Экспериментальная возможность

 Указывает браузеру выполнить загрузку по URL, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.
 *Тип*: **<string>** ;*Значение по умолчанию*: *none*;*Анимируем*: **нет**

`href (en-US)`

URL или фрагмент URL для перехода.
 *Тип*: **<URL>** ; *Значение по умолчанию*: *none*; *Анимируем*: **да**

`hreflang`

 URL на человеческом языке или фрагмент URL для перехода.
 *Тип*: **<string>**; *Значение по умолчанию*: *none*; *Анимируем*: **да**

`ping`
Экспериментальная возможность

 Разделённый пробелами список URL при переходе по которым браузер будет отправлять `POST` запросы с телом `PING` (в фоне). Обычно используется для трекинга.
 *Тип*: **<list-of-URLs>**; *Значение по умолчанию*: *none*; *Анимируем*: **нет**

`referrerpolicy`
Экспериментальная возможность

 Какой referrer отправить при получении URL.
 *Тип*: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; *Значение по умолчанию*: *none*; *Анимируем*: **нет**

`rel`
Экспериментальная возможность

 Отношение между целевым объектом и объектом link.
 *Тип*: **<list-of-Link-Types>** ; *Значение по умолчанию*: *none*; *Анимируем*: **да**

`target (en-US)`

 Где отобразить переход URL.
 *Тип*: `_self`|`_parent`|`_top`|`_blank`|**<name>** ; *Значение по умолчанию*: `_self`; *Анимируем*: **да**

`type`

MIME type для ссылки URL.
 *Тип*: **<string>** ; *Значение по умолчанию*: *none*; *Анимируем*: **да**

`xlink:href (en-US)`
Устарело

 URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.
 *Тип*: **<URL>** ; *Значение по умолчанию*: *none*; *Анимируем*: **да**

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

Core Attributes

Наиболее используемые: `id`, `lang`, `tabindex (en-US)`

Styling Attributes
`class`, `style (en-US)`
Conditional Processing Attributes

Наиболее используемые: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

Global event attributes, Document element event attributes, Graphical event attributes

Presentation Attributes

Наиболее используемые: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

XLink Attributes

Наиболее используемые: `xlink:title (en-US)`

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` (en-US).

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

|  |  |
| --- | --- |
| Категории | Элемент-контейнер |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияЭлементы фигурыСтруктурные элементыЭлементы градиента`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>` (en-US), `<mask>` (en-US), `<pattern>`, `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>`, `<view>` (en-US) |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Links |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<animateMotion> - SVG

<animateMotion>
===============

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

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

|  |  |
| --- | --- |
| Категории | Элемент анимации |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы описания`<mpath>` (en-US) |

Атрибуты
--------

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

* Условные атрибуты обработки (en-US)
* Основные атрибуты (en-US)
* Атрибуты события анимации (en-US)
* Атрибуты Xlink (en-US)
* Атрибуты времени анимации (en-US)
* Величина атрибутов анимации (en-US)
* Атрибуты добавления анимации (en-US)
* `externalResourcesRequired`
### Собственные атрибуты

* `calcMode (en-US)`
* `path (en-US)`
* `keyPoints (en-US)`
* `rotate (en-US)`
* `origin (en-US)`
DOM интерфейс
-------------

Этот элемент реализует интерфейс `SVGAnimateMotionElement` (en-US).

Пример
------

### SVG

```html
<?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>
```

### Результат

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

| Specification |
| --- |
| SVG Animations Level 2 # AnimateMotionElement |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<mpath>` (en-US)


<defs> - SVG

<defs>
======

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

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

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

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

|  |  |
| --- | --- |
| Категории | Элемент-контейнер, Структурный элемент |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияЭлементы фигурыСтруктурные элементыЭлементы градиента`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>` (en-US), `<mask>` (en-US), `<pattern>`, `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>`, `<view>` (en-US) |

Атрибуты
--------

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

* Conditional processing attributes
* Core attributes
* Graphical event attributes
* Presentation attributes
* `class`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Специфичные атрибуты

*Нет.*

Интерфейс DOM
-------------

Элемент реализует интерфейс `SVGDefsElement` (en-US).

Пример
------

```xml
<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>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Head |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<use>`


<pattern> - SVG

<pattern>
=========

 Элемент **`<pattern>`** определяет графический объект, который может быть перерисован с повторяющимися координатами **x** и **y** («мозаичным»), чтобы покрыть область.
 На ссылку `<pattern>` ссылаются атрибуты `fill` и / или `stroke` на других графических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном.
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<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>
```

Атрибуты
--------

`height (en-US)`

 Этот атрибут определяет высоту плитки шаблона.
 *Value type*: **<length>**|**<percentage>**; *Default value*: `0`; *Animatable*: **yes**

`href (en-US)`

 Этот атрибут по умолчанию ссылается на пример шаблона для `<pattern>`
*Value type*: **<URL>**; *Default value*: *none*; *Animatable*: **yes**

`patternContentUnits`

 Этот атрибут определяет систему координат содержимого `<pattern>`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox`; *Default value*: `userSpaceOnUse`; *Animatable*: **yes**

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

`patternTransform (en-US)`

 Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.
 *Value type*: **<transform-list>**; *Default value*: *none*; *Animatable*: **yes**

`patternUnits (en-US)`

 Этот атрибут определяет систему координат для атрибутов `x`, `y`, `width` и `height`.
 *Value type*: `userSpaceOnUse`|`objectBoundingBox`; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`preserveAspectRatio (en-US)`

 Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.
 *Value type*: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; *Default value*: `xMidYMid meet`; *Animatable*: **yes**

`viewBox`

 Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.
 *Value type*: **<list-of-numbers>** ; *Default value*: none; *Animatable*: **yes**

`width`

 Этот атрибут определяет ширину плитки шаблона.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`x`

 Этот атрибут определяет смещение координаты x мозаичного изображения.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`xlink:href (en-US)`
Устарело

 Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов `<pattern>`.
 *Value type*: **<URL>**; *Default value*: *none*; *Animatable*: **yes**

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

`y`

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

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

Core Attributes

Most notably: `id`, `tabindex (en-US)`

Styling Attributes
`class`, `style (en-US)`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

XLink Attributes

Most notably: `xlink:title (en-US)`

Нотации
-------

|  |  |
| --- | --- |
| Категории | Элемент-контейнер |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияЭлементы фигурыСтруктурные элементыЭлементы градиента`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>` (en-US), `<mask>` (en-US), `<pattern>`, `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>`, `<view>` (en-US) |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Patterns |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<circle> - SVG

<circle>
========

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

Информация
----------

|  |  |
| --- | --- |
| Категории | Элементы базовых фигур, Графические элементы, Элемент фигуры |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описания |

Пример
------

```xml
<?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

Атрибуты
--------

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

* Условные атрибуты »
* Ключевые атрибуты »
* Атрибуты графических событий »
* Атрибуты представления »
* `class`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Особые

* `cx`

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

* `cy`

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

* `r`

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

Интерфейс DOM
-------------

Этот элемент реализует интерфейс `SVGCircleElement` (en-US).

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CircleElement |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<ellipse>`
* SVG Circle


<radialGradient> - SVG

<radialGradient>
================

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

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

|  |  |
| --- | --- |
| Категории | Элемент градиента |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы описания`<animate>`, `<animateTransform>` (en-US), `<set>` (en-US), `<stop>` (en-US) |

Атрибуты
--------

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

* Основные атрибуты »
* Атрибуты презентации »
* Атрибуты Xlink »
* `class`
* `style (en-US)`
* `externalResourcesRequired`
### Специфические атрибуты

* `gradientUnits (en-US)`
* `gradientTransform (en-US)`
* `cx`
* `cy`
* `r`
* `fx (en-US)`
* `fy (en-US)`
* `fr (en-US)`
* `spreadMethod (en-US)`
* `xlink:href (en-US)`
DOM интерфейс
-------------

Этот элемент реализует `SVGRadialGradientElement` (en-US) интерфейс.

Пример
------

### SVG

```html
<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>
```

### Результат

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradients |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<linearGradient>`


<ellipse> - SVG

<ellipse>
=========

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

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

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

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

Атрибуты
--------

`cx`

 Позиция эллипса по x.
 *Тип значения*: **<length>**|**<percentage>** ; *Значение по умолчанию*: `0`; *Можно анимировать*: **да**

`cy`

 Позиция эллипса по y.
 *Тип значения*: **<length>**|**<percentage>** ; *Значение по умолчанию*: `0`; *Можно анимировать*: **да**

`rx`

 Радиус эллипса по x.
 *Тип значения*: `auto`|**<length>**|**<percentage>** ;*Значение по умолчанию*: `auto`; *Можно анимировать*: **да**

`ry`

 Радиус эллипса по y.
 *Тип значения*: `auto`|**<length>**|**<percentage>** ; *Значение по умолчанию*: `auto`; *Можно анимировать*: **да**

`pathLength (en-US)`

Этот атрибут позволяет установить длину всего пути.

*Тип значения*: **<number>** ; *Значение по умолчанию*: *нет*; *Можно анимировать*: **да**

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

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

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

Самые важные: `id`, `tabindex (en-US)`

Атрибуты стиля
`class`, `style (en-US)`
Условные атрибуты

Самые важные: `requiredExtensions`, `systemLanguage (en-US)`

Атрибуты событий

Глобальные атрибуты событий, Атрибуты графических событий

Атрибуты представления

Самые важные: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

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`

Информация
----------

|  |  |
| --- | --- |
| Категории | Элементы базовых фигур, Графические элементы, Элемент фигуры |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описания |

Интерфейс DOM
-------------

Этот элемент реализует интерфейс `SVGEllipseElement` (en-US).

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # EllipseElement |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<circle>`


<text> - SVG

<text>
======

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

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

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<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>
```

Атрибуты
--------

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

* Условные атрибуты обработки
* Основные атрибуты
* Графические атрибуты событий
* Атрибуты представления
* `class`
* `style (en-US)`
* `transform`
* `externalResourcesRequired`
### Специфические атрибуты

* `х`
* `у`
* `dx (en-US)`
* `dy (en-US)`
* `rotate (en-US)`
* `textLength (en-US)`
* `text-anchor`
* `lengthAdjust`
Интерфейс DOM
-------------

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

Примеры
-------

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

#### SVG

```html
<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>
```

#### Результат

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

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

#### SVG

```html
<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>
```

#### Результат

### Цвет текста

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

#### SVG

```html
<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>
```

#### Результат

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

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

#### SVG

```html
<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>
```

#### Результат

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextElement |

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

|  |  |
| --- | --- |
| Категории | Графические элементы, Текстосодержащий элемент |
| Разрешённый контент | Символы и любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияДочерние элементы с текстовым контентом`<a>` |

Связь
-----

* `<tref>` (en-US)
* `<tspan>` (en-US)
* `<altGlyph>`


<path> - SVG

<path>
======

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

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<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>
```

Атрибуты
--------

`d`

 Этот атрибут определяет форму.
 *Тип значения*: **<string>** ; *Значение по умолчанию*: `''`; *Анимирование*: **Да**

`pathLength (en-US)`

 Этот атрибут позволяет указывать общую длину в пользовательских единицах.
 *Тип значения*: **<number>** ; *Значение по умолчанию*:*нет*; *Анимирование*: **Да**

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

Атрибуты ядра

Most notably: `id`, `tabindex (en-US)`

Атрибуты стиля
`class`, `style (en-US)`
Атрибуты условной обработки

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Атрибуты событий

Атрибуты глобальных событий, Атрибуты графических событий

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

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`

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

|  |  |
| --- | --- |
| Категории | Графические элементы, Элемент фигуры |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описания |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PathElement |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* SVG basic shapes: `<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>` (en-US), `<rect>`
* The MDN SVG "Getting Started" tutorial : Path


<linearGradient> - SVG

<linearGradient>
================

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

**Примечание:** Не путайте с CSS `linear-gradient()` (en-US), CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

Атрибуты
--------

`gradientUnits (en-US)`

 Определяет систему координат для атрибутов `x1`, `x2`, `y1`, `y2`
*Тип значения*: `userSpaceOnUse`|`objectBoundingBox` ; *Значение по умолчанию*: `objectBoundingBox`; *Анимируемый*: **да**

`gradientTransform (en-US)`

 Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента.
 *Тип значения*: **<transform-list> (en-US)** ; *Значение по умолчанию*: *identity transform*; *Анимируемый*: **да**

`href (en-US)`

 Этот атрибут определяет ссылку на другой элемент `<linearGradient>`, который будет использоваться в качестве шаблона.
 *Тип значения*: **<URL>** (en-US) ; *Значение по умолчанию*: none; *Анимируемый*: **да**

`spreadMethod (en-US)`

 Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.
 *Тип значения*: `pad`|`reflect`|`repeat` ; *Значение по умолчанию*: `pad`; *Анимируемый*: **да**

`x1 (en-US)`

 Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `0%`; *Анимируемый*: **да**

`x2 (en-US)`

 Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `100%`; *Анимируемый*: **да**

`xlink:href (en-US)`

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

<IRI> (en-US) ссылка на другой `<linearGradient>` элемент, который будет использоваться в качестве шаблона.
 *Тип значения*: **<IRI>** (en-US) ; *Значение по умолчанию*: none; *Анимируемый*: **да**

`y1 (en-US)`

 Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `0%`; *Анимируемый*: **да**

`y2 (en-US)`

 Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `0%`; *Анимируемый*: **да**

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

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

Прежде всего: `id`

Атрибуты стилизации (en-US)
`class`, `style (en-US)`
Атрибуты событий

Глобальные атрибуты событий (en-US), Атрибуты событий элементов документа (en-US)

Атрибуты презентации (en-US)

Прежде всего: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

XLink атрибуты
`xlink:href (en-US)`, `xlink:title (en-US)`
Примечания по использованию
---------------------------

|  |  |
| --- | --- |
| Категории | Элемент градиента |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы описания`<animate>`, `<animateTransform>` (en-US), `<set>` (en-US), `<stop>` (en-US) |

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LinearGradients |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


lang - SVG

lang
====

Атрибут **`lang`** указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определённых элементов.

Также существует атрибут `xml:lang (en-US)` (с пространством имён). Если определены оба атрибута, то используется тот, который имеет пространство имён, а атрибут без пространства имён игнорируется.

В SVG 1.1 существовал атрибут `lang`, определённый с другим значением и применимый только к `<glyph>` (en-US). Этот атрибут указывал список языков в формате BCP 47. Глиф предназначался для использования, если атрибут `xml:lang` точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут `xml:lang` точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".

Все элементы используют этот атрибут.

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <text lang="en-US">This is some English text</text>
</svg>
```

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

|  |  |
| --- | --- |
| Значение | `<language-tag>` |
| Значение по умолчанию | *Отсутствует* |
| Анимируемый | Нет |

`<language-tag>`

Это значение указывает язык, используемый для элемента. Синтаксис этого значения определён в спецификации BCP 47.

Наиболее распространённым синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделённых знаком минус. Например, `en-US` для американского английского языка или `de-AT` для австрийского немецкого.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LangSpaceAttrs |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Спецификация BCP 47 для тегов для идентификации языков


Ширина - SVG

Ширина
======

Атрибут **`width`** определяет горизонтальный размер элементов в пользовательской системе координат.

Двадцать пять элементов используют эти атрибуты: `<feBlend>`, `<feColorMatrix>` (en-US), `<feComponentTransfer>` (en-US), `<feComposite>` (en-US), `<feConvolveMatrix>` (en-US), `<feDiffuseLighting>` (en-US), `<feDisplacementMap>` (en-US), `<feDropShadow>` (en-US), `<feFlood>` (en-US), `<feGaussianBlur>` (en-US), `<feImage>` (en-US), `<feMerge>` (en-US), `<feMorphology>` (en-US), `<feOffset>` (en-US), `<feSpecularLighting>` (en-US), `<feTile>` (en-US), `<feTurbulence>` (en-US), `<filter>` (en-US), `<foreignObject>`, `<image>`, `<mask>` (en-US), `<pattern>`, `<rect>`, `<svg>`, and `<use>`

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- С шириной равной 0 или меньше, ничего не будет отображаться -->
  <rect x="0" y="0" width="0" height="90" />
  <rect x="0" y="100" width="60" height="90" />
  <rect x="0" y="200" width="100%" height="90" />
</svg>
```

feBlend
-------

Для `<feBlend>`, `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feColorMatrix
-------------

Для `<feColorMatrix>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feComponentTransfer
-------------------

Для `<feComponentTransfer>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feComposite
-----------

Для `<feComposite>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feConvolveMatrix
----------------

Для `<feConvolveMatrix>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feDiffuseLighting
-----------------

Для `<feDiffuseLighting>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feDisplacementMap
-----------------

Для `<feDisplacementMap>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feDropShadow
------------

Для `<feDropShadow>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feFlood
-------

Для `<feFlood>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feGaussianBlur
--------------

Для `<feGaussianBlur>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feImage
-------

Для `<feImage>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feMerge
-------

Для `<feMerge>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feMorphology
------------

Для `<feMorphology>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feOffset
--------

Для `<feOffset>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feSpecularLighting
------------------

Для `<feSpecularLighting>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feTile
------

Для `<feTile>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

feTurbulence
------------

Для `<feTurbulence>` (en-US), `width` определяет горизонтальный размер для отображения области примитивов.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `100%` |
| Animatable | Да |

filter
------

Для `<filter>` (en-US), `width` определяет горизонтальный размер для отображения области фильтров.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `120%` |
| Animatable | Да |

foreignObject
-------------

Для `<foreignObject>`, `width` определяет горизонтальный размер для отображения области ссылочных документов.

| Значение | `auto` | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `auto` (рассматривается как `0`) |
| Animatable | Да |

**Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для `<foreignObject>`.

image
-----

Для `<image>`, `width` определяет горизонтальный размер для изображения.

| Значение | `auto` | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `auto` (рассматривается как ширина изображения) |
| Animatable | Да |

**Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для изображений.

mask
----

Для `<mask>` (en-US), `width` определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута `maskUnits (en-US)`.

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `120%` |
| Animatable | Да |

pattern
-------

Для `<pattern>`, `width` определяет горизонтальный размер мостящегося паттерна. Точный эффект этого атрибута зависит от атрибутов `patternUnits (en-US)` и `patternTransform (en-US)`.

| Значение | **<length>** |
| --- | --- |
| По умолчанию | `0` |
| Animatable | Да |

rect
----

Для `<rect>`, `width` определяет горизонтальный размер прямоугольника.

| Значение | `auto` | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `auto` (рассматривается как `0`) |
| Animatable | Да |

**Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для прямоугольника.

svg
---

Для `<svg>`, `width` определяет горизонтальный размер отображаемой области вьюпорта SVG.

**Примечание:** В HTML документе, если оба атрибута `viewBox` и `width` опущены, svg-элемент будет отображаться с шириной `300px`

| Значение | `auto` | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `auto` (рассматривается как `100%`) |
| Animatable | Да |

**Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для `<svg>`.

use
---

Для `<use>`, `width` определяет горизонтальный размер для ссылочного элемента.

| Значение | `auto` | **<length>** | **<percentage>** |
| --- | --- |
| По умолчанию | `auto` (рассматривается как `0`) |
| Animatable | Да |

**Примечание:** Начиная с SVG2, `width` это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использованных элементов.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-width |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-width |
| CSS Masking Module Level 1 # element-attrdef-mask-width |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementWidthAttribute |


fill-rule - SVG

fill-rule
=========

Атрибут `fill-rule` указывает алгоритм, используемый для определения внутренней части фигуры.

**Примечание:** Как атрибут представления, `fill-rule` можно использовать в качестве CSS-свойства.

Этот атрибут может быть применён к следующим SVG элементам:

* `<path>`
* `<polygon>`
* `<polyline>` (en-US)
* `<text>`
* `<textPath>` (en-US)
* `<tref>` (en-US)
* `<tspan>` (en-US)
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Значение по умолчанию для свойства `fill-rule` -->
  <polygon
 fill-rule="nonzero"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 Центральная часть считается не входящей в фигуру и поэтому не заполняется цветом
 -->
  <polygon
 fill-rule="evenodd"
 stroke="red"
 points="150,0 121,90 198,35 102,35 179,90" />
</svg>
```

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

|  |  |
| --- | --- |
| Значение | `nonzero` | `evenodd` |
| Значение по умолчанию | `nonzero` |
| Поддержка анимации | discrete |

Атрибут `fill-rule` предоставляет два варианта определения внутренней части фигуры (то есть области, подлежащей заливке):

### nonzero

Значение `nonzero` определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении, а затем проверки мест, где сегмент фигуры пересекает луч. Начиная с нуля, каждый раз, когда луч пересекает сегмент фигуры слева направо, происходит увеличение счётчика на единицу, а когда справа налево, то уменьшение. Если после подсчёта пересечений результат равен нулю, то точка находится за пределами фигуры, в противном случае — внутри.

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Применение значения `nonzero` для пересекающихся частей фигуры -->
  <polygon
 fill-rule="nonzero"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 Применение значения `nonzero` для фигуры, находящейся внутри
 другой фигуры (два квадрата, сегменты которых составлены из точек,
 расположенных в одном направлении — по часовой стрелке)
 -->
  <path
 fill-rule="nonzero"
 stroke="red"
 d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" />

  <!--
 Применение значения `nonzero` для фигуры, находящейся внутри
 другой фигуры (два квадрата, сегменты которых составлены из точек,
 расположенных в противоположных направлениях: у одного квадрата по
 часовой стрелке, у второго — против)
 -->
  <path
 fill-rule="nonzero"
 stroke="red"
 d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" />
</svg>
```

### evenodd

Значение `evenodd` определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении и подсчёта количества сегментов фигуры, которые этот луч пересекает. Если это число нечётное, точка находится внутри, если чётное, то точка снаружи.

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Применение значения `evenodd` для пересекающихся частей фигуры -->
  <polygon
 fill-rule="evenodd"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 Применение значения `evenodd` для фигуры, находящейся внутри
 другой фигуры (два квадрата, сегменты которых составлены из точек,
 расположенных в одном направлении — по часовой стрелке)
 -->
  <path
 fill-rule="evenodd"
 stroke="red"
 d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" />

  <!--
 Применение значения `evenodd` для фигуры, находящейся внутри
 другой фигуры (два квадрата, сегменты которых составлены из точек,
 расположенных в противоположных направлениях: у одного квадрата по
 часовой стрелке, у второго — против)
 -->
  <path
 fill-rule="evenodd"
 stroke="red"
 d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # WindingRule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


x - SVG

x
=

Атрибут **`x`** определяет координату по оси x в пользовательской системе координат.

Этот атрибут можно использовать для следующих SVG-элементов:

* `<cursor>` (en-US)
* `<feBlend>`
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDropShadow>` (en-US)
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<foreignObject>`
* `<glyphRef>` (en-US)
* `<image>`
* `<mask>` (en-US)
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>` (en-US)
* `<text>`
* `<tref>` (en-US)
* `<tspan>` (en-US)
* `<use>`
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="60" height="60" />
  <rect x="120" y="20" width="60" height="60" />
  <rect x="220" y="20" width="60" height="60" />
</svg>
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-x |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-x |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-x |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-x |
| CSS Masking Module Level 1 # element-attrdef-mask-x |
| Scalable Vector Graphics (SVG) 2 # X |
| Scalable Vector Graphics (SVG) 2 # PatternElementXAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementXAttribute |


Основные атрибуты SVG - SVG

Основные атрибуты SVG
=====================

Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.

* `id`
* `lang`
* `tabindex`
* `xml:base`
* `xml:lang`
* `xml:space`
Атрибуты
--------

`id`

 Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).
 *Значение*: Любое строковое значение ID; *Анимируемый*: **Нет**

`lang`

Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в документе IETF "Tags for Identifying Languages (BCP47)".

**Примечание:** SVG2 предоставляет новые `lang` атрибуты. Если атрибуты `lang` и `xml:lang` используются вместе, то `xml:lang` имеет приоритет над `lang`.

*Значение*: Любой валидный язык ID; *Анимируемый*: **Нет**

`tabindex (en-US)`

 Атрибут SVG `tabindex` позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.
 *Тип значения*: <integer>; *Анимируемый*: **Нет**

`xml:base (en-US)`

 Указывает базовый IRI, отличный от базового IRI текущего документа.
 *Тип*: <IRI>; *Анимируемый*: **Нет**

`xml:lang (en-US)`

Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута lang в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (`null`) значение атрибута (`xml:lang=""`) для указания неизвестного языка. Вместо этого, используйте `xml:lang="und"`.

**Примечание:** SVG2 предоставляет новые `lang` атрибуты. Если атрибуты `lang` и `xml:lang` используются вместе, то `xml:lang` имеет приоритет над `lang`.

*Значение*: Любой валидный язык ID; *Анимируемый*: **Нет**

`xml:space`
Устарело

SVG поддерживает стандартный XML-атрибут `xml:space` для указания обработки символов пробела в пределах заданных `<text>` символов текущего элемента.

**Примечание:** Вместо атрибута `xml:space` следует использовать CSS-свойство `white-space`.

*Значение*: **`default`** | `preserve`; *Анимируемый*: **Нет**

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


overflow - SVG

overflow
========

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

Атрибут `overflow` имеет те же значения, что определены для `CSS-свойства overflow`. Но имеют место также следующие дополнительные моменты:

* Атрибут `overflow` применяется к элементам, которые устанавливают новый порт просмотра (см. ниже), элементам`<pattern>` и `<marker>` (en-US), на все прочие элементы он не влияет.
* Для элементов, к которым атрибут `overflow` может применяться, если он имеет значение `hidden` или `scroll`, результатом будет создание нового пути обрезки прямоугольной формы. Это эквивалентно определению элемента `<clipPath>` (en-US), содержимое которого есть элемент `<rect>`, который определяет эквивалентный прямоугольник, и затем указанию <url> этого элемента `<clipPath>` (en-US) равным значению атрибута `clip-path (en-US)` для данного элемента.
* Если атрибут `overflow` имеет значение, отличное от `hidden` или `scroll`, он не оказывает действия.
* Внутри SVG-содержимого значение `auto` эквивалентно значению `visible`.
* Когда svg-элемент высшего уровня включён в HTML-код, если атрибут `overflow` имеет значение `hidden` или `scroll`, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки.
* Когда svg-элемент высшего уровня автономен, атрибут `overflow` на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра.
* Первоначальное значение `overflow`, как определено в CSS, есть `visible`, и это применяется также к корневому элементу `<svg>`; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту `overflow` элементов, устанавливающих новый порт просмотра, элементов `pattern` и `marker` значение `hidden`.

Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. `CSS overflow`.

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

| Категории | Презентационный атрибут |
| --- | --- |
| Значение | visible | hidden | scroll | auto | inherit |
| Анимируемый | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Пример
------

Элементы
--------

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

* `<svg>`
* `<symbol>` (en-US)
* `<image>`
* `<foreignObject>`
* `<pattern>`
* `<marker>` (en-US)
Смотрите также
--------------

* `CSS overflow`


stroke-dashoffset - SVG

stroke-dashoffset
=================

**Примечание:** **Прежняя редакция:** « Справочник SVG атрибутов
 Этот атрибут определяет смещение обводки относительно начального положения.
 При использовании <percentage> (en-US), значение будет вычисляться от текущего viewport.
 Значение может быть отрицательным.

 Атрибут **`stroke-dashoffset`** определяет сдвиг массива **dash array** относительно начального положения.

**Примечание:** Атрибут `stroke-dashoffset` может использоваться как свойство CSS.

Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>` (en-US), `<rect>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), and `<tspan>` (en-US)

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Без dash array -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- Без dash offset -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!--
 Начало dash array тянет 3 отрезка
 -->
  <line
 x1="0"
 y1="5"
 x2="30"
 y2="5"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="3" />

  <!--
 Начало dash array толкает 3 отрезка
 -->
  <line
 x1="0"
 y1="7"
 x2="30"
 y2="7"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="-3" />

  <!--
 Начало dash array тянет 1 отрезок с финишем в том же рендеринге,
 что и в предыдущем примере
 -->
  <line
 x1="0"
 y1="9"
 x2="30"
 y2="9"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="1" />

  <!--
 красным выделено смещение dash array для каждой строки
 -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
</svg>
```

Usage context
-------------

| Категория | Атрибут оформления |
| --- | --- |
| Значение | <percentage> | <length> | inherit |
| Исходное значение | 0 |
| Анимируемый | Да |
| Спецификация | SVG 1.1 (2nd Edition) |

Элементы
--------

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

* Элементы форм (en-US)
* Текстовые элементы (en-US)


additive - SVG

additive
========

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

Этот атрибут определяет, является ли анимация аддитивной.

Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута.

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

| Категории | Атрибут добавления анимации |
| --- | --- |
| Значение | **replace** | sum |
| Анимируемый | Нет |
| Нормативный документ | SVG 1.1 (2nd Edition) |

sum

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

replace

Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации `by (en-US)` и `to (en-US)`, как описано в SMIL Animation: How from, to and by attributes affect additive behavior.

Пример
------

Элементы
--------

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

* `<animate>`
* `<animateColor>` (en-US)
* `<animateMotion>`
* `<animateTransform>` (en-US)


stroke - SVG

stroke
======

« SVG Attribute reference home

Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — **None**.

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

| Категория | Presentation attribute |
| --- | --- |
| Значения | <paint>, `context-fill`, `context-stroke` |
| Анимируемый | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Примеры
-------

### SVG Line с stroke

#### Пример 1: Нарисуйте прямую зелёную линию, используя **stroke**

```html
<svg height="50" width="300">
  <path stroke="green" d="M5 20 1215 0" />
</svg>
```

#### Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke

```html
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
</svg>
```

Использование `context-stroke`
------------------------------

Информацию об использовании значения нестандартного и ограниченного `context-stroke` (и `context-fill`) смотреть в документации для свойства `-moz-context-properties`.

Элементы
--------

Следующие элементы могут использовать атрибут `stroke`.

* Shape elements
* Text content elements


letter-spacing - SVG

letter-spacing
==============

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

Атрибут `letter-spacing` контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута `kerning (en-US)` .

Для SVG, если значением атрибута выступает обыкновенное число (например, `128`), браузер добавляет это к <length> в текущей системе координат пользователя.

Если же значением атрибута выступают относительные величины, к примеру `.25em` или `1%`, браузер преобразовывает их в <length> соответствующее значение в текущей системе координат пользователя.

В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите `CSS letter-spacing` для дополнительной информации.

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

| Категория | Атрибут представления |
| --- | --- |
| Значение | normal | <length> | **inherit** |
| Анимируется | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Элементы
--------

В следующих элементах можно использовать атрибут `letter-spacing`

* Элементы текстового контента, например `<text>` и `<tspan>`.
Смотрите также
--------------

* `CSS letter-spacing`
Примечание об использовании
---------------------------

Атрибут `letter-spacing` плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования `letter-spacing`. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; `textNode.getComputedTextLength()` возвращает точно такую же длину, `letter-spacing` установлен или нет, что приводит к грубо неправильным результатам при разнесении букв.


ry - SVG

ry
==

Атрибут **`ry`** определяет радиус круга по оси y.

Два элемента используют этот атрибут: `<ellipse>` и `<rect>`

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" ry="0" rx="25" />
  <ellipse cx="150" cy="50" ry="25" rx="25" />
  <ellipse cx="250" cy="50" ry="50" rx="25" />

  <rect x="20" y="120" width="60" height="60" ry="0" rx="15" />
  <rect x="120" y="120" width="60" height="60" ry="15" rx="15" />
  <rect x="220" y="120" width="60" height="60" ry="150" rx="15" />
</svg>
```

ellipse
-------

Для элемента `<ellipse>`, `ry` определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

| Значение | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| Значение по умолчанию | `auto` |
| Анимируемый | Да |

**Примечание:** Начиная с **SVG2**, **ry** - *свойство геометрии(Geometry Property).* Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

rect
----

Для `<rect>`, `ry` определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

Способ интерпретации значения атрибута `ry` зависит как от атрибута `rx` , так и от ширины прямоугольника:

* Если правильно задано значение для `ry`, но не для `rx` (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
* Если ни `ry`, ни `rx` не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
* Если `ry` больше половины ширины прямоугольника, то браузер будет считать значение `ry` половиной ширины прямоугольника.

| Значение | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| Значение по умолчанию | `auto` |
| Анимируемый | Да |

**Примечание:** Начиная с **SVG2**, **ry** - *свойство геометрии(Geometry Property).* Это означает, что атрибут также можно использовать как свойство CSS для rect.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RY |


viewBox - SVG

viewBox
=======

Аттрибут `viewBox` определяет расположение и размеры окна отображения SVG.

Значение атрибута `viewBox` — это набор четырёх чисел: `min-x`, `min-y`, `width` и `height`, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).

Пример
------
```

html, body, svg {
  height:100%
}

svg:not(:root) {
  display: inline-block;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
 С относительными единицами, такими как проценты,
 размер квадрата не меняется в зависимости от
 значения viewBox
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 При больших значениях viewBox круг получается
 маленьким, потому что его радиус указан в абсолютных
 единицах: расстояние 4 получается маленьким относительно
 размера окна 100, указанного во viewBox
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Также не зависит от viewBox, как и в предыдущем примере -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 С маленьким значением размера viewBox круг получается
 большим, потому что радиус 4 намного больше, если размер
 области отображения равен 10, чем если он равен 100
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 Точка с координатами (0, 0) теперь является центром области
 отображения. 100% всё ещё приравнивается к полному размеру
 области отображения (10 на 10), поэтому квадрат выглядит
 сдвинутым в правый нижний угол
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 Так как точка (0, 0) находится в центре, а координаты круга,
 равные 50%, относительно размера области отображения (10 на 10)
 принимаются равными 5, круг оказывается с центром
 в правом нижнем углу
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
```

На отображение с `viewBox` также влияет атрибут `preserveAspectRatio (en-US)`.

**Примечание:** при значениях `width` и `height` меньших или равных `0` элемент не отображается

Пять элементов используют этот атрибут: `<marker>` (en-US), `<pattern>`, `<svg>`, `<symbol>` (en-US) и `<view>` (en-US).

marker
------

Для элемента `<marker>` (en-US), `viewBox` определяет расположение и размеры содержимого элемента `<marker>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

pattern
-------

Для элемента `<pattern>`, `viewBox` определяет расположение и размеры содержимого шаблона.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

svg
---

Для элемента `<svg>`, `viewBox` определяет расположение и размеры содержимого элемента `<svg>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

symbol
------

Для элемента `<symbol>` (en-US), `viewBox` определяет расположение и размеры содержимого элемента `<symbol>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

view
----

Для элемента `<view>` (en-US), `viewBox` определяет расположение и размеры содержимого элемента `<view>`.

| Значение | **<number>**?, **<number>**?, **<number>**?, **<number>** |
| --- | --- |
| Значение по умолчанию | *нет* |
| Анимируемое | Да |

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

* SVG Getting Started: Positions


xml:space - SVG

xml:space
=========

**SVG2:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

« SVG Attribute reference home

SVG supports the standard XML attribute `xml:space` to specify the handling of white space characters within a given `<text>` element's character data. Note that any child element of a `<text>` element may also have an `xml:space` attribute which will apply to that child element's text content. Note that this attribute influences the way a browser should parse the xml content and therefore will change the way the DOM is built. It means that any change made to the value of this attribute through the DOM API may have no effect.

**Примечание:** Instead of using the `xml:space` attribute you should use the `white-space` CSS property.

Usage context
-------------

| Categories | *None* |
| --- | --- |
| Value | **`default`** | `preserve` |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

default

Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены.

preserve

Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с `xml:space="preserve"`, строка "a b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b").

Examples
--------

Elements
--------

All the SVG elements can use the `xml:space` attribute


shape-rendering - SVG

shape-rendering
===============

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

При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы `<path>` или базовые фигуры. `shape-rendering` предоставляет возможность указывать данные рекомендации.

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

| Категория | Атрибут представления |
| --- | --- |
| Значения | **auto** | optimizeSpeed | crispEdges | geometricPrecision | inherit |
| Анимация | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

auto

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

optimizeSpeed

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

crispEdges

Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краёв рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата чёткости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краёв с пикселями устройства.

geometricPrecision

Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и чёткими краям.

Пример
------

```xml
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="100" height="100"
 shape-rendering="optimizeSpeed">
```

| shape-rendering: geometricPrecision:
 shape-rendering:geometricPrecision | shape-rendering: optimizeSpeed
 shape-rendering:optimizeSpeed |
| --- | --- |

Также можно воспользоваться css shape-rendering:

```xml
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="100" height="100"
 style="shape-rendering:optimizeSpeed;">
```

Элементы
--------

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

* Shape elements


class - SVG

class
=====

« Домашняя страница справочника по SVG атрибутам

Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".

Класс элемента имеет 2 ключевые роли:

* Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.
* Для общих целей Броузера.

Класс может быть использован для стилизации SVG содержимого используя CSS.

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

| Категория | None |
| --- | --- |
| Значение | <list-of-class-names> |
| Возможна анимация | Yes |
| Нормативный документ | SVG 1.1 (2nd Edition): The class attribute |

Example
-------

```html
<html>
  <body>
    <svg
 width="120"
 height="220"
 viewPort="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
 <![CDATA[
 rect.rectClass {
 stroke: #000066;
 fill: #00cc00;
 }
 circle.circleClass {
 stroke: #006600;
 fill: #cc0000;
 }
 ]]>
 </style>

      <rect class="rectClass" x="10" y="10" width="100" height="100" />
      <circle class="circleClass" cx="40" cy="50" r="26" />
    </svg>
  </body>
</html>
```

Элементы
--------

В следующих элементах допустимо использовать атрибут `class`

:`<a>`

* `<altGlyph>`
* `<circle>`
* `<clipPath>` (en-US)
* `<defs>`
* `<desc>` (en-US)
* `<ellipse>`
* `<feBlend>`
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feFlood>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<font>` (en-US)
* `<foreignObject>`
* `<g>`
* `<glyph>` (en-US)
* `<glyphRef>` (en-US)
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>` (en-US)
* `<mask>` (en-US)
* `<missing-glyph>` (en-US)
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>` (en-US)
* `<radialGradient>`
* `<rect>`
* `<stop>` (en-US)
* `<svg>`
* `<switch>` (en-US)
* `<symbol>` (en-US)
* `<text>`
* `<textPath>` (en-US)
* `<title>` (en-US)
* `<tref>` (en-US)
* `<tspan>` (en-US)
* `<use>`
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


id - SVG

id
==

Атрибут **`id`** присваивает уникальное имя элементу.

Этот атрибут используется всеми элементами.

Пример
------

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
 <![CDATA[
 #smallRect {
 stroke: #000066;
 fill: #00cc00;
 }
 ]]>
 </style>

  <rect id="smallRect" x="10" y="10" width="100" height="100" />
</svg>
```

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

|  |  |
| --- | --- |
| Значение | <id> |
| Значение по умолчанию | *Отсутствует* |
| Анимируемый | Нет |

<id>

Задаёт идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.

**Примечание:** Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.

Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-).

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Core.attrib |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* HTML `id`
* `class`


rx - SVG

rx
==

Атрибут **`rx`** определяет радиус круга по оси x.

Два элемента используют этот атрибут: `<ellipse>` и `<rect>`

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>
```

ellipse
-------

Для элемента `<ellipse>` rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

| Значение | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| Значение по умолчанию | `auto` |
| Анимируемый | Да |

**Примечание:** Начиная с **SVG2**, **rx** - *свойство геометрии(Geometry Property).* Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

rect
----

Для `<rect>`, `rx` определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

Способ интерпретации значения атрибута `rx` зависит как от атрибута `ry` , так и от ширины прямоугольника:

* Если правильно задано значение для `rx`, но не для `ry` (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.
* Если ни `rx`, ни `ry` не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.
* Если `rx` больше половины ширины прямоугольника, то браузер будет считать значение `rx` половиной ширины прямоугольника.

| Значение | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| Значение по умолчанию | `auto` |
| Анимируемый | Да |

**Примечание:** Начиная с **SVG2**, **rx** - *свойство геометрии(Geometry Property).* Это означает, что атрибут также можно использовать как свойство CSS для rect.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RX |


repeatCount - SVG

repeatCount
===========

Атрибут **`repeatCount`** указывает, сколько раз будет воспроизводиться анимация.

Этот атрибут можно использовать для следующих SVG-элементов:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>` (en-US)
* `<set>` (en-US)
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="5" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

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

|  |  |
| --- | --- |
| Значение | `<number>` | `indefinite` |
| Значение по умолчанию | *Отсутствует* |
| Анимируемый | Нет |

`<number>`

Это значение определяет количество повторений. Оно может включать частичные итерации, выраженные в виде дробных значений. Дробное значение описывает часть простой анимации. Значение должно быть больше `0`.

`indefinite`

Это значение указывает, что анимация будет повторяться бесконечно (то есть пока документ открыт).

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

| Specification |
| --- |
| SVG Animations Level 2 # RepeatCountAttribute |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


stop-color - SVG

stop-color
==========

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

Атрибут `stop-color` указывает какой цвет использовать при остановке градиента. Значения `currentColor` и ICC цвета могут быть заданы так же, как в <paint> спецификации для атрибутов `fill` и `stroke`.

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

| Категория | Атрибут представления |
| --- | --- |
| Значение | currentColor | <color> | <icccolor> | inherit |
| Начальное значение | black |
| Анимация | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Примеры
-------

Элементы
--------

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

* `<stop>` (en-US)
Смотрите также
--------------

* `stop-opacity (en-US)`


dur - SVG

dur
===

Атрибут **`dur`** отображает простую длительность анимации.

Пять элементов используют данный атрибут: `<animate>`, `<animateColor>` (en-US), `<animateMotion>`, `<animateTransform>` (en-US), и `<set>` (en-US)

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="indefinite" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="3s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

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

|  |  |
| --- | --- |
| Значение | `<clock-value>`
 | `indefinite` | `media` |
| Значение по умолчанию | `indefinite` |
| Анимируемый | Нет |

`<clock-value>`

Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (`h`), минутах (`m`), секундах (`s`) или миллисекундах (`ms`). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: `hh:mm:ss.iii` или `mm:ss.iii`

`media`

Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.

`indefinite`

Задаёт простую длительность, как незаданную

**Примечание:** Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов `<set>` (en-US)).

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

| Specification |
| --- |
| SVG Animations Level 2 # DurAttribute |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


patternContentUnits - SVG

patternContentUnits
===================

« SVG Attribute reference home

Атрибут `patternContentUnits` определяет систему координат для содержимого `<pattern>`. Заметьте, что этот атрибут не имеет эффекта, если `viewBox` определён на `<pattern>` элементе.

Если `patternContentUnits` атрибут не определён, то его значение предполагается равным `userSpaceOnUse`.

Заметьте, что значение `<pattern>` не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаёте значение `patternContentUnits` равным `objectBoundingBox`, значения, указанные в процентах, будут пересчитаны, как если бы вы задали `userSpaceOnUse`.

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

| Categories | *None* |
| --- | --- |
| Value | `userSpaceOnUse` | **`objectBoundingBox`** |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

userSpaceOnUse

Пользовательская система координат `<pattern>` element is the coordinate system that results from taking the current user coordinate system in place at the time when the `<pattern>` element is referenced (i.e., the user coordinate system for the element referencing the `<pattern>` element via a `fill` or `stroke` attribute) and then applying the transform specified by attribute `patternTransform (en-US)`.

objectBoundingBox

Пользовательская система координат для содержимого `<pattern>` элемента is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute `patternTransform (en-US)`.

Примеры
-------

Элементы
--------

Атрибут `patternContentUnits` может быть определён на следующих элементах:

* `<pattern>`