видимость

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она поддерживается браузерами с ⁨июля 2015⁩ года.

Атрибут visibility позволяет управлять видимостью графических элементов. При значении hidden или collapse текущий графический элемент невидим.

Примечание: Если для текстового элемента атрибут visibility имеет значение hidden, текст невидим, но всё равно занимает место при вычислении расположения текста.

В зависимости от значения атрибута pointer-events, графические элементы с атрибутом visibility, имеющим значение hidden, всё ещё могут получать события.

Примечание: У visibility как у атрибута представления также есть соответствующее свойство CSS: visibility. Если указаны оба варианта, приоритет имеет свойство CSS.

Элементы

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

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

Значение	`visible` \| `hidden` \| `collapse`
Значение по умолчанию	`visible`
Анимируемый	Да

visible: Это значение указывает, что элемент будет отображён.
hidden: Это значение указывает, что элемент не будет отображён. Хотя он по-прежнему входит в дерево отрисовки, он может получать события указателя в зависимости от атрибута pointer-events, получать фокус в зависимости от атрибута tabindex, участвовать в вычислении ограничивающей рамки и контуров обрезки, а также влиять на расположение текста.
collapse: Это значение эквивалентно hidden.

Примеры

Пример 1

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="10"
    y="10"
    width="200"
    height="100"
    stroke="black"
    stroke-width="5"
    fill="transparent" />
  <g stroke="seagreen" stroke-width="5" fill="skyblue">
    <rect x="20" y="20" width="80" height="80" visibility="visible" />
    <rect x="120" y="20" width="80" height="80" visibility="hidden" />
  </g>
</svg>

Пример 2

В следующем примере переключается свойство CSS visibility для пути изображения SVG.

HTML

<button id="nav-toggle-button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    class="button-icon">
    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
    <path
      d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
      class="invisible" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  <span> click me </span>
</button>

CSS

svg {
  display: inline !important;
}
span {
  vertical-align: 50%;
}
button {
  line-height: 1em;
}
.invisible {
  visibility: hidden;
}

JavaScript

const button = document.querySelector("button");
button.addEventListener("click", (evt) => {
  button
    .querySelector("svg > path:nth-of-type(1)")
    .classList.toggle("invisible");
  button
    .querySelector("svg > path:nth-of-type(2)")
    .classList.toggle("invisible");
});

Результат

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

Спецификация
Модуль отображения CSS уровня 3> # visibility>
Масштабируемая векторная графика (SVG) 2> # VisibilityControl>

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`visibility`	1	12	1	4	1	18	4	10.1	1	1.0	4.4	1

См. также

атрибут display
свойство CSS visibility

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/visibility