visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

html,body,svg {  height: 100%;}

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

次の例は、SVG 画像パスの CSSvisibility を切り替えます。

HTML

html

<button>  <svg    xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"   >    <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"      />    <path d="M0 0h24v24H0z" fill="none" />  </svg>  <span> クリックしてね </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");});

結果

仕様書

Specification
CSS Display Module Level 3 # visibility
Scalable Vector Graphics (SVG) 2 # VisibilityControl

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on2025年8月21日 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換