<use>

Ngữ cảnh sử dụng

Thuộc tính

href

URL tới một phần tử/mảnh cần được sao chép. Xem Lưu ý sử dụng để biết chi tiết về các lỗi thường gặp.
Kiểu giá trị: <URL>; Giá trị mặc định: none; Có thể hoạt ảnh: có

xlink:href Deprecated

Một tham chiếu <IRI> tới một phần tử/mảnh cần được sao chép. Nếu cả href và xlink:href đều có mặt, giá trị do href cung cấp sẽ được dùng.
Kiểu giá trị: <IRI>; Giá trị mặc định: none; Có thể hoạt ảnh: có

Warning: Kể từ SVG 2, thuộc tính xlink:href đã bị loại bỏ để thay bằng href. Xem trang xlink:href để biết thêm thông tin.

x

Tọa độ x của một phép dịch chuyển cuối bổ sung được áp dụng cho phần tử <use>.
Kiểu giá trị: <coordinate>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

y

Tọa độ y của một phép dịch chuyển cuối bổ sung được áp dụng cho phần tử <use>.
Kiểu giá trị: <coordinate>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

width

Chiều rộng của phần tử <use>.
Kiểu giá trị: <length>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

height

Chiều cao của phần tử <use>.
Kiểu giá trị: <length>; 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 SVGUseElement.

Ví dụ

Ví dụ sau cho thấy cách dùng phần tử <use> để vẽ một hình tròn với màu fill và stroke khác nhau. Ở hình tròn cuối, stroke="red" sẽ bị bỏ qua vì stroke đã được đặt trên myCircle.

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

Lưu ý sử dụng

Hầu hết các thuộc tính trên <use> sẽ bị bỏ qua nếu thuộc tính tương ứng đã được định nghĩa trên phần tử được <use> tham chiếu tới. (Điều này khác với cách các thuộc tính kiểu CSS ghi đè lên những thuộc tính được đặt "sớm hơn" trong cascade). Chỉ các thuộc tính x, y, width, height và href trên phần tử <use> mới sẽ hoặc có thể có tác dụng, được mô tả bên dưới, nếu phần tử được tham chiếu đã định nghĩa thuộc tính tương ứng. Tuy nhiên, mọi thuộc tính khác không được đặt trên phần tử được tham chiếu sẽ được áp dụng cho phần tử <use>.

Vì các nút đã sao chép không được hiển thị ra ngoài, cần cẩn thận khi dùng CSS để tạo kiểu cho phần tử <use> và các hậu duệ đã sao chép của nó. Không có gì đảm bảo rằng các thuộc tính CSS sẽ được kế thừa bởi DOM đã sao chép trừ khi bạn yêu cầu rõ ràng bằng kế thừa CSS.

Vì lý do bảo mật, trình duyệt có thể áp dụng chính sách cùng nguồn gốc cho phần tử <use> và có thể từ chối tải một URL khác nguồn trong thuộc tính href. Hiện chưa có cách xác định để đặt chính sách khác nguồn cho phần tử <use>.

Tải tài nguyên từ tệp ngoài qua <use>

Bạn có thể tải các nút từ một tệp SVG bên ngoài qua phần tử <use> bằng cách chỉ định đường dẫn của tệp theo sau là một mảnh URL trỏ tới id của nút cần tải:

<svg>
  <use href="../assets/my-svg.svg#my-fragment"></use>
</svg>

Theo truyền thống, mảnh URL luôn là bắt buộc, ngay cả khi bạn chỉ muốn tải toàn bộ tài liệu SVG. Trong trường hợp như vậy, id sẽ được đặt trên phần tử gốc SVG:

<svg xmlns="http://www.w3.org/2000/svg" id="my-fragment">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>

Tuy nhiên, các triển khai hiện đại đã được cập nhật để nếu bạn muốn tải toàn bộ tài liệu bên ngoài, bạn có thể tham chiếu nó mà không cần mảnh URL nữa (và id cũng không còn cần trên phần tử gốc của tài liệu SVG):

<svg>
  <use href="../assets/my-svg.svg"></use>
</svg>

Kiểm tra bảng Khả năng tương thích trình duyệt để biết hỗ trợ trình duyệt.

Tải tài nguyên từ data URI qua <use>

Việc tải tài nguyên bằng data URI trong thuộc tính href đã bị loại bỏ vì lý do bảo mật. Điều này áp dụng cho <use href="data:..." và cả khi đặt href bằng phương thức set hoặc setAttribute.

Một lần nữa, hãy kiểm tra bảng Khả năng tương thích trình duyệt để biết hỗ trợ trình duyệt.

Thông số kỹ thuật

Khả năng tương thích trình duyệt