видимость

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

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

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

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

Элементы

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

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

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

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

Примеры

Пример 1

html

<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

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

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");
});

Результат

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

Спецификация
Scalable Vector Graphics (SVG) 2 # VisibilityControl

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`visibility`	1	12	1	4	1	18	4	10.1	1	1.0	4.4

См. также

display атрибут
visibility

© 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/visibility