<a>
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.
* Some parts of this feature may have varying levels of support.
Phần tử <a> của SVG tạo một siêu liên kết tới các trang web khác, tệp, vị trí trong cùng trang, địa chỉ email hoặc bất kỳ URL nào khác. Nó rất giống với phần tử <a> của HTML.
Phần tử <a> của SVG là một phần tử vùng chứa, nghĩa là bạn có thể tạo một liên kết bao quanh văn bản (như trong HTML) nhưng cũng có thể bao quanh bất kỳ hình dạng nào.
Ngữ cảnh sử dụng
| Categories | Container 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
download-
Yêu cầu trình duyệt tải xuống một URL thay vì điều hướng tới nó, để người dùng sẽ được nhắc lưu nó dưới dạng một tệp cục bộ. Kiểu giá trị: <string>; Giá trị mặc định: không có; Có thể hoạt ảnh: không
href-
URL hoặc mảnh URL mà siêu liên kết trỏ tới. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: có
hreflang-
Ngôn ngữ tự nhiên của URL hoặc mảnh URL mà siêu liên kết trỏ tới. Kiểu giá trị: <string>; Giá trị mặc định: không có; Có thể hoạt ảnh: không
interestforExperimental Non-standard-
Xác định phần tử
<a>như một interest invoker. Giá trị của nó làidcủa phần tử đích sẽ bị tác động theo một cách nào đó (thường là được hiển thị hoặc ẩn đi) khi sự quan tâm được thể hiện hoặc mất đi trên phần tử invoker (ví dụ, khi rê chuột/không rê chuột hoặc focus/blur nó). Xem Using interest invokers để biết thêm chi tiết và ví dụ. Kiểu giá trị: <string>; Giá trị mặc định: không có; Có thể hoạt ảnh: không pingExperimental-
Một danh sách URL ngăn cách bằng khoảng trắng tới đó, khi siêu liên kết được theo, các yêu cầu
POSTvới nội dungPINGsẽ được trình duyệt gửi đi (ở nền). Thường được dùng để theo dõi. Đối với một tính năng được hỗ trợ rộng hơn nhằm giải quyết cùng các trường hợp sử dụng, xemNavigator.sendBeacon(). Kiểu giá trị: <list-of-URLs>; Giá trị mặc định: không có; Có thể hoạt ảnh: không referrerpolicy-
Chỉ định referrer nào sẽ được gửi khi tìm nạp URL. Kiểu giá trị:
no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url; Giá trị mặc định: không có; Có thể hoạt ảnh: không rel-
Mối quan hệ của đối tượng đích với đối tượng liên kết. Kiểu giá trị: <list-of-Link-Types>; Giá trị mặc định: không có; Có thể hoạt ảnh: không
target-
Nơi hiển thị URL được liên kết tới. Kiểu giá trị:
_self|_parent|_top|_blank| <XML-Name>; Giá trị mặc định:_self; Có thể hoạt ảnh: có type-
Một MIME type cho URL được liên kết. Kiểu giá trị: <string>; Giá trị mặc định: không có; Có thể hoạt ảnh: không
xlink:hrefDeprecated-
URL hoặc mảnh URL mà siêu liên kết trỏ tới. Có thể cần cho khả năng tương thích ngược với các trình duyệt cũ. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGAElement.
Ví dụ
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Một liên kết bao quanh một hình dạng -->
<a href="/docs/Web/SVG/Reference/Element/circle">
<circle cx="50" cy="40" r="35" />
</a>
<!-- Một liên kết bao quanh văn bản -->
<a href="/docs/Web/SVG/Reference/Element/text">
<text x="50" y="90" text-anchor="middle"><circle></text>
</a>
</svg>
/* Vì SVG không cung cấp kiểu hiển thị mặc định cho liên kết,
nên việc thêm một chút là thực hành tốt */
@namespace svg url("http://www.w3.org/2000/svg");
/* Cần thiết để chỉ chọn các phần tử <a> của SVG, chứ không phải của HTML.
Xem cảnh báo bên dưới */
svg|a:link,
svg|a:visited {
cursor: pointer;
}
svg|a text,
text svg|a {
fill: blue; /* Ngay cả với văn bản, SVG vẫn dùng fill thay cho color */
text-decoration: underline;
}
svg|a:hover,
svg|a:active {
outline: dotted 1px blue;
}
Warning:
Vì phần tử này dùng chung tên thẻ với phần tử HTML <a>, việc chọn a bằng CSS hoặc querySelector có thể áp dụng cho sai loại phần tử. Hãy thử quy tắc @namespace để phân biệt hai loại.
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2> # AElement> |
Tương thích trình duyệt
Xem thêm
- Thuộc tính
xlink:title - Phần tử HTML
<a>