ширина
Атрибут width определяет горизонтальную длину элемента в системе координат пользователя.
Элементы
Вы можете использовать этот атрибут с элементами SVG, описанными в разделах ниже.
<feBlend>
<feColorMatrix>
Для <feColorMatrix>, width определяет горизонтальную длину области рендеринга примитива.
<feComponentTransfer>
Для <feComponentTransfer>, width определяет горизонтальную длину области рендеринга примитива.
<feComposite>
Для <feComposite>, width определяет горизонтальную длину области рендеринга примитива.
<feConvolveMatrix>
Для <feConvolveMatrix>, width определяет горизонтальную длину области рендеринга примитива.
<feDiffuseLighting>
Для <feDiffuseLighting>, width определяет горизонтальную длину области рендеринга примитива.
<feDisplacementMap>
Для <feDisplacementMap>, width определяет горизонтальную длину области рендеринга примитива.
<feDropShadow>
Для <feDropShadow>, width определяет горизонтальную длину области рендеринга примитива.
<feFlood>
<feGaussianBlur>
Для <feGaussianBlur>, width определяет горизонтальную длину области рендеринга примитива.
<feImage>
<feMerge>
<feMorphology>
Для <feMorphology>, width определяет горизонтальную длину области рендеринга примитива.
<feOffset>
Для <feOffset>, width определяет горизонтальную длину области рендеринга примитива.
<feSpecularLighting>
Для <feSpecularLighting>, width определяет горизонтальную длину области рендеринга примитива.
<feTile>
Для <feTile>, width определяет горизонтальную длину области отрисовки примитива.
| Значение | <length> | <percentage> |
|---|---|
| Значение по умолчанию | 100% |
| Анимируемо | Да |
<feTurbulence>
Для <feTurbulence>, width определяет горизонтальную длину области отрисовки примитива.
| Значение | <length> | <percentage> |
|---|---|
| Значение по умолчанию | 100% |
| Анимируемо | Да |
<filter>
Для <filter>, width определяет горизонтальную длину области отрисовки фильтра.
| Значение | <length> | <percentage> |
|---|---|
| Значение по умолчанию | 120% |
| Анимируемо | Да |
<foreignObject>
Для <foreignObject>, width определяет горизонтальную длину области отрисовки для связанного документа.
| Значение | auto | <length> | <percentage> |
|---|---|
| Значение по умолчанию |
auto (рассматривается как 0) |
| Анимируемо | Да |
Примечание: Начиная с SVG2, width является геометрическим свойством, что означает, что этот атрибут также может использоваться как свойство CSS для <foreignObject>.
<image>
Для <image>, width определяет горизонтальную длину изображения.
| Значение | auto | <length> | <percentage> |
|---|---|
| Значение по умолчанию |
auto (рассматривается как внутренняя ширина изображения) |
| Анимируемо | Да |
Примечание: Начиная с SVG2, width является геометрическим свойством, что означает, что этот атрибут также может использоваться как свойство CSS для изображений.
<mask>
Для <mask>, width определяет горизонтальную длину области действия. Точный эффект этого атрибута зависит от атрибута maskUnits.
| Значение | <length> | <percentage> |
|---|---|
| Значение по умолчанию | 120% |
| Анимируемо | Да |
<pattern>
Для <pattern>, width определяет горизонтальную длину повторяющегося узора. Точный эффект этого атрибута зависит от атрибутов patternUnits и patternTransform.
| Значение | <length> |
|---|---|
| Значение по умолчанию | 0 |
| Анимируемо | Да |
<rect>
Для <rect>, width определяет горизонтальную длину прямоугольника.
| Значение | auto | <length> | <percentage> |
|---|---|
| Значение по умолчанию |
auto (рассматривается как 0) |
| Анимируемо | Да |
Примечание: Начиная с SVG2, width является геометрическим свойством, что означает, что этот атрибут также может использоваться как свойство CSS для прямоугольников.
<svg>
Для <svg>, width определяет горизонтальную длину области отрисовки области просмотра SVG.
Примечание: В HTML-документе, если оба атрибута viewBox и width опущены, элемент svg будет отображаться с шириной 300px
| Значение | auto | <length> | <percentage> |
|---|---|
| Значение по умолчанию |
auto (рассматривается как 100%) |
| Анимируемо | Да |
Примечание: Начиная с SVG2, width является геометрическим свойством, что означает, что этот атрибут также может использоваться как свойство CSS для <svg>.
<use>
Для <use>, width определяет горизонтальную длину связанного элемента.
| Значение | auto | <length> | <percentage> |
|---|---|
| Значение по умолчанию |
auto (рассматривается как 0) |
| Анимируемо | Да |
Примечание: width не влияет на use элементы, если у связанного элемента нет viewBox - т.е. они действуют только когда use ссылается на svg или symbol элемент.
Примечание: Начиная с SVG2, width является геометрическим свойством, что означает, что этот атрибут также может использоваться как свойство CSS для элементов use.
Примеры
Этот пример включает три <rect> элемента с различными значениями атрибута width. У первого <rect> установлен атрибут width="0". SVG-элементы с шириной 0 или меньше не отображаются.
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- With a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90" fill="red" stroke-width="5" stroke="black" /> <rect x="0" y="100" width="60" height="90" fill="red" stroke-width="5" stroke="black" /> <rect x="0" y="200" width="100%" height="90" fill="red" stroke-width="5" stroke="black" /> </svg>
Спецификации
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width