visibility
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính visibility cho phép bạn kiểm soát độ hiển thị của các phần tử đồ họa. Với giá trị hidden hoặc collapse, phần tử đồ họa hiện tại sẽ không nhìn thấy được.
Note:
Nếu thuộc tính visibility được đặt thành hidden trên một phần tử văn bản, thì văn bản sẽ không nhìn thấy nhưng vẫn chiếm không gian trong các phép tính bố cục văn bản.
Tùy theo giá trị của thuộc tính pointer-events, các phần tử đồ họa có thuộc tính visibility được đặt thành hidden vẫn có thể nhận sự kiện.
Note:
Là một thuộc tính trình bày, visibility cũng có một thuộc tính CSS tương ứng: visibility. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Phần tử
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
<a><audio><canvas><circle><ellipse><foreignObject><iframe><image><line><path><polygon><polyline><rect><text><textPath><tspan><video>
Ghi chú sử dụng
| Giá trị |
visible | hidden | collapse
|
|---|---|
| Giá trị mặc định | visible |
| Có thể hoạt ảnh | Có |
visible-
Giá trị này cho biết phần tử sẽ được vẽ.
-
Giá trị này cho biết phần tử sẽ không được vẽ. Dù nó vẫn là một phần của cây kết xuất, nó có thể nhận sự kiện con trỏ tùy theo thuộc tính
pointer-events, có thể nhận focus tùy theo thuộc tínhtabindex, góp phần vào tính toán hộp bao và đường cắt, và vẫn ảnh hưởng đến bố cục văn bản. collapse-
Giá trị này tương đương với
hidden.
Ví dụ
Ví dụ 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>
Ví dụ 2
Ví dụ sau bật tắt visibility CSS của đường dẫn ảnh 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");
});
Kết quả
Đặc tả
| Specification |
|---|
| CSS Display Module Level 3 # visibility |
| Scalable Vector Graphics (SVG) 2 # VisibilityControl |
Tương thích trình duyệt
Xem thêm
- Thuộc tính
display - Thuộc tính CSS
visibility