class
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.
Gán một tên lớp hoặc một tập hợp các tên lớp cho một phần tử. Bạn có thể gán cùng một tên lớp hoặc các tên lớp cho nhiều phần tử bất kỳ, tuy nhiên nhiều tên lớp phải được phân tách bằng ký tự khoảng trắng.
Tên lớp của một phần tử có hai vai trò chính:
- Là bộ chọn của stylesheet, khi tác giả gán thông tin kiểu cho một tập hợp phần tử.
- Dùng chung cho trình duyệt.
Bạn có thể dùng lớp này để tạo kiểu cho nội dung SVG bằng CSS.
Ghi chú ngữ cảnh
| Danh mục | Không có |
|---|---|
| Giá trị | <list-of-class-names> |
| Có thể hoạt ảnh | Có |
Ví dụ
html
<html lang="vi">
<body>
<svg
width="120"
height="220"
viewPort="0 0 120 120"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<style>
<![CDATA[
rect.rectClass {
stroke: #000066;
fill: #00cc00;
}
circle.circleClass {
stroke: #006600;
fill: #cc0000;
}
]]>
</style>
<rect class="rectClass" x="10" y="10" width="100" height="100" />
<circle class="circleClass" cx="40" cy="50" r="26" />
</svg>
</body>
</html>
Phần tử
Các phần tử sau có thể dùng thuộc tính class:
<a><circle><clipPath><defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence><filter><foreignObject><g><image><line><linearGradient><marker><mask><path><pattern><polygon><polyline><radialGradient><rect><stop><svg><switch><symbol><text><textPath><title><tspan><use>
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling |