display

Атрибут display позволяет управлять отображением графических элементов и элементов-контейнеров.

Значение display="none" указывает, что данный элемент и его дочерние элементы не будут отображаться. Любое значение, отличное от none или inherit, указывает, что данный элемент будет отображаться браузером.

Если применить этот атрибут к элементу-контейнеру и задать для display значение none, контейнер и все его дочерние элементы станут невидимыми; таким образом, атрибут применяется ко всей группе элементов. Это означает, что дочерний элемент элемента с display="none" никогда не будет отображаться, даже если для его display задано значение, отличное от none.

Если атрибут display имеет значение none, данный элемент не становится частью дерева рендеринга. Это влияет на элементы <tspan>, обработку событий, вычисление ограничивающей рамки и расчёт контуров обрезки:

• Если для элемента <tspan> задано display со значением none, текстовая строка игнорируется при компоновке текста.
• Что касается событий: если для display задано значение none, элемент не получает никаких событий.
• Геометрия графического элемента с display, заданным в значение none, не учитывается при вычислении ограничивающей рамки и контуров обрезки.

Атрибут display влияет только на непосредственное отображение данного элемента, но не препятствует ссылкам на него из других элементов. Например, установка значения none для элемента <path> не позволит отображать этот элемент непосредственно на холсте, однако на элемент <path> по-прежнему можно ссылаться из элемента <textPath>; кроме того, его геометрия будет использоваться при размещении текста на контуре, даже если для элемента <path> задано значение none атрибута display.

Этот атрибут также влияет на непосредственное отображение во внеэкранных холстах, например при использовании масок или контуров обрезки. Поэтому установка display="none" для дочернего элемента <mask> не позволит отображать его как часть маски. Аналогично, установка display="none" для дочернего элемента <clipPath> не позволит этому дочернему элементу участвовать в формировании контура обрезки.

Этот атрибут можно использовать с любым элементом SVG.

Пример

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect
    x="140"
    y="20"
    width="60"
    height="60"
    fill="yellow"
    display="none"></rect>
</svg>

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

Описание значений см. в документации к свойству CSS display.

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

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

См. также

• Атрибут visibility
• Свойство CSS display