<symbol>
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.
<symbol> SVG được dùng để định nghĩa các đối tượng mẫu đồ họa có thể được khởi tạo bởi phần tử <use>.
Việc dùng phần tử <symbol> cho các đồ họa được sử dụng nhiều lần trong cùng một tài liệu giúp tăng cấu trúc và ngữ nghĩa. Những tài liệu có cấu trúc phong phú có thể được hiển thị dưới dạng đồ họa, lời nói hoặc Braille, từ đó tăng khả năng tiếp cận.
Note:
Bản thân phần tử <symbol> không được dùng để hiển thị. Chỉ các thể hiện của phần tử <symbol> (tức là một tham chiếu tới <symbol> bằng phần tử <use>) mới được hiển thị. Điều đó có nghĩa là một số trình duyệt có thể từ chối hiển thị trực tiếp phần tử <symbol> ngay cả khi thuộc tính CSS display nói ngược lại.
Ngữ cảnh sử dụng
| Categories | Container element, Structural element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Thuộc tính
height-
Thuộc tính này xác định chiều cao của symbol. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
auto; Có thể hoạt ảnh: có preserveAspectRatio-
Thuộc tính này định nghĩa cách fragment svg phải bị biến dạng nếu nó được nhúng trong một khối chứa có aspect ratio khác. Kiểu giá trị: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; Giá trị mặc định:xMidYMid meet; Có thể hoạt ảnh: có refX-
Thuộc tính này xác định tọa độ x của điểm tham chiếu của symbol. Kiểu giá trị: <length> | <percentage> |
left|center|right; Giá trị mặc định: Không có; Có thể hoạt ảnh: có refY-
Thuộc tính này xác định tọa độ y của điểm tham chiếu của symbol. Kiểu giá trị: <length> | <percentage> |
top|center|bottom; Giá trị mặc định: Không có; Có thể hoạt ảnh: có viewBox-
Thuộc tính này định nghĩa ranh giới của viewport SVG cho symbol hiện tại. Kiểu giá trị: <list-of-numbers>; Giá trị mặc định: none; Có thể hoạt ảnh: có
width-
Thuộc tính này xác định chiều rộng của symbol. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
auto; Có thể hoạt ảnh: có x-
Thuộc tính này xác định tọa độ x của symbol. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có y-
Thuộc tính này xác định tọa độ y của symbol. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGSymbolElement.
Ví dụ
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path
d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none"
stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" opacity="1.0" />
<use href="#myDot" x="20" y="5" opacity="0.8" />
<use href="#myDot" x="35" y="5" opacity="0.6" />
<use href="#myDot" x="50" y="5" opacity="0.4" />
<use href="#myDot" x="65" y="5" opacity="0.2" />
</svg>
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # SymbolElement |