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 要素に対応する属性として使用することができます。
<a><audio><canvas><circle><ellipse><foreignObject><iframe><image><line><path><polygon><polyline><rect><text><textPath><tspan><video>
使用上のメモ
| 値 |
visible | hidden | collapse
|
|---|---|
| 値 | visible |
| アニメーション | 可 |
visible-
この値は、要素が描画されることを示します。
-
この値は、要素が描画されないことを示します。ただし、要素はレンダリングツリーに属しており、つまり、
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
次の例は、SVG 画像パスの CSS visibility を切り替えます。
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
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 |
ブラウザーの互換性
Loading…
関連情報
display属性- CSS の
visibilityプロパティ