visibility

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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 画像パスの CSS visibility を切り替えます。

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> クリックしてね </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");
});

結果

仕様書

仕様書
CSS Display Module Level 3 # visibility
Scalable Vector Graphics (SVG) 2 # VisibilityControl

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年8月21日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告