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

Атрибут **`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 |