Spec-Zone.ru › SVG

ширина

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

Элементы

Вы можете использовать этот атрибут с элементами SVG, описанными в разделах ниже.

<feBlend>

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

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feColorMatrix>

Для <feColorMatrix>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feComponentTransfer>

Для <feComponentTransfer>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feComposite>

Для <feComposite>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feConvolveMatrix>

Для <feConvolveMatrix>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feDiffuseLighting>

Для <feDiffuseLighting>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feDisplacementMap>

Для <feDisplacementMap>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feDropShadow>

Для <feDropShadow>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feFlood>

Для <feFlood>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feGaussianBlur>

Для <feGaussianBlur>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feImage>

Для <feImage>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feMerge>

Для <feMerge>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feMorphology>

Для <feMorphology>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feOffset>

Для <feOffset>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да

<feSpecularLighting>

Для <feSpecularLighting>, width определяет горизонтальную длину области рендеринга примитива.

Значение <длина> | <процент>
Значение по умолчанию 100%
Анимируемый Да
END_OF_DOCUMENT_MARKER

<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 или меньше не отображаются.

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

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

Спецификация
Модуль эффектов фильтра уровня 1
# element-attrdef-filter-width
Модуль эффектов фильтра уровня 1
# element-attrdef-filter-primitive-width
Модуль CSS маскирования уровня 1
# element-attrdef-mask-width
Scalable Vector Graphics (SVG) 2
# Sizing
Scalable Vector Graphics (SVG) 2
# PatternElementWidthAttribute

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API