recursal/MDN huggingface dataset:
<animate>
=========

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

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

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

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

» animate.svg

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

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

* Conditional processing attributes »
* Core attributes »
* Animation event attributes »
* Xlink attributes »
* Animation attribute target attributes »
* Animation timing attributes »
* Animation value attributes »
* Animation addition attributes »
* `externalResourcesRequired`
### Атрибуты элемента

* `attributeName`
* `attributeType`
* `from (en-US)`
* `to (en-US)`
* `dur`
* `repeatCount`
DOM интерфейс
-------------

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<rect>
======

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

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

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

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

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


```xml
<?xml version="1.0"?>
<svg width="120" height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">

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


» rect-1.svg

### `<rect>` со скруглёнными углами


```xml
<?xml version="1.0"?>
<svg width="120" height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10"
 width="100" height="100"
 rx="15" ry="15"/>

</svg>
```


» rect-2.svg

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

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

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

* `x`
* `y`
* `width`
* `height (en-US)`
* `rx`
* `ry`
DOM Интерфейс
-------------

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

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

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

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

* `<path>`
<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>`**. Объекты, созданные внутри элемента `<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>`
<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>
================

Элемент **`<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>`
<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
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 для тегов для идентификации языков
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 элементах.

* `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` имеет те же значения, что определены для `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 атрибутов
 Этот атрибут определяет смещение обводки относительно начального положения.
 При использовании <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)