отображение

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

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

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

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

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

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

Этот атрибут также влияет на непосредственное отображение на внеэкранных холстах, таких как маски или пути обрезки. Таким образом, установка 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>