Tài liệu SVG có hỗ trợ các thuộc tính dữ liệu tùy chỉnh không?

87

Trong HTML5, các phần tử có thể có siêu dữ liệu tùy ý được lưu trữ trong các thuộc tính XML có tên bắt đầu bằng data-chẳng hạn <p data-myid="123456">. Đây có phải là một phần của thông số kỹ thuật SVG không?

Trong thực tế, kỹ thuật này hoạt động tốt đối với tài liệu SVG ở nhiều nơi. Nhưng tôi muốn biết liệu đó có phải là một phần của thông số SVG chính thức hay không, bởi vì định dạng này đủ trẻ nên vẫn còn nhiều điểm không tương thích giữa các trình duyệt, đặc biệt là trên thiết bị di động. Vì vậy, trước khi cam kết mã, tôi muốn biết liệu tôi có thể mong đợi các trình duyệt trong tương lai hội tụ để hỗ trợ điều này hay không.

Tôi tìm thấy thông báo này từ danh sách gửi thư của nhóm làm việc nói rằng họ "mong đợi [họ] sẽ" hỗ trợ nó. Điều này đã trở thành chính thức?

svg web-standards

— Leopd
nguồn

121

Trong khi các câu trả lời khác đúng về mặt kỹ thuật, chúng bỏ qua thực tế là SVG cung cấp một cơ chế thay thế data-*. SVG cho phép bao gồm bất kỳ thuộc tính và thẻ nào, miễn là nó không xung đột với những thuộc tính và thẻ hiện có (nói cách khác: bạn nên sử dụng không gian tên).

Để sử dụng cơ chế (tương đương) này:

sử dụng mydata:idthay vì data-myid, như thế này:<p mydata:id="123456">
đảm bảo bạn xác định không gian tên trong thẻ mở SVG, như sau: <svg xmlns:mydata="http://www.myexample.com/whatever">

CHỈNH SỬA: SVG2 , hiện là Đề xuất Ứng viên W3C (ngày 4 tháng 10 năm 2018), sẽ hỗ trợ data-trực tiếp (không có không gian tên, giống như HTML). Tuy nhiên, sẽ mất một thời gian trước khi sự hỗ trợ được phổ biến rộng rãi. Cảm ơn @cvrebert đã chỉ ra điều này .

— johndodo
nguồn

7

Phần thứ ba của phương trình: el.getAttribute('mydata:id')để lấy dữ liệu bạn đã gắn vào phần tử SVG. (Lưu ý: nếu bạn đang sử dụng d3, miền tên này sẽ bị tước theo mặc định và bạn sẽ chỉ el.getAttribute('id').)

— ericsoco

2

Đây phải là câu trả lời được chấp nhận. SVG là một phần mở rộng của XML cho phép bạn sử dụng các thẻ từ các không gian tên khác nhau.

— Melle

1

Tại sao không gian tên phải được tùy chỉnh? Tại sao việc khai báo không gian tên HTML5 trong tài liệu không đủ để sử dụng data-*trong SVG?

— Fabien Snauwaert

1

FYI, cho dù sử dụng không gian tên riêng (ví dụ

<svg xmlns="http://www.w3.org/2000/svg" xmlns:mydata="http://www.myexample.com/whatever"><text x="10" y="20" mydata:id="something">SVG</text></svg>

:) hay không gian tên xhtml, sẽ không xác thực trên validator.w3.org/check (sử dụng SVG 1.1), nhưng cả hai đều hoạt động trong trình duyệt. Sau đó, có thể sử dụng getAttributehoặc getAttributeNSđể tìm nạp dữ liệu.

— Fabien Snauwaert

29

Các data-*thuộc tính là một phần của HTML5. Nó không phải là một thuộc tính XML chung chung.

Khuyến nghị SVG W3C hiện tại là SVG 1.1 (từ 2011-08). Nó không cho phép thuộc tính này, vì bạn có thể kiểm tra trong danh sách thuộc tính .

Tương tự là trường hợp của Dự thảo làm việc SVG 2 (từ 2012-08). Cập nhật (2015) : Có vẻ như nó nhằm hỗ trợ data-*các thuộc tính trong SVG 2 (hiện vẫn là Bản nháp đang hoạt động).

— unor
nguồn

19

data-*các thuộc tính trên các phần tử SVG được hỗ trợ chính thức trong bản nháp hiện tại của SVG2. Xem:

w3c/svgwgcam kết 1cb4ee9: Đã thêm SVGElement.datasetvà cho phép data-*các thuộc tính trên tất cả các phần tử SVG.
ACTION-3694: Thêm ghi chú thuộc tính "data- *" vào thông số kỹ thuật. (Ngày tạo: 15 tháng 1, 2015)
GIẢI PHÁP: Chúng tôi sẽ dành các thuộc tính "data- *" để sử dụng trong nội dung SVG. API để xử lý chúng nằm trên Element. (từ SVG WG Telecon vào ngày 15 tháng 1 năm 2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html

— cvrebert
nguồn

9

có một cơ chế tổng quát hơn.

svg hỗ trợ desccác phần tử có thể chứa xml tùy ý từ các không gian tên khác. liên kết các trường hợp của phần tử này hoặc các nút con từ không gian tên của bạn bằng id phụ thuộc hoặc thuộc tính refid.

đây là phần liên quan của thông số kỹ thuật (5.4) .

— sập
nguồn

1

Cảm ơn vì con trỏ. Tôi có nên suy ra SVG không chính thức hỗ trợ data-các thuộc tính không?

— Leopd

2

Không phải desclà dành cho sakes trợ năng?

— matanster

@matt Tôi không nghĩ như vậy, ít nhất là dựa trên đường mòn.

— sập

1

@matt Không nhất thiết. Afaik tiêu chuẩn sẽ chỉ đề cập đến mục đích của chú thích độc lập với bất kỳ kết xuất nào. Điều này không mâu thuẫn với sự phù hợp của phần tử với mục đích. Cụ thể, có một bài đăng trên blog thảo luận về việc sử dụng các aria-labelledbythuộc tính và phần tử mô tả làm nhãn có thể truy cập. MDN đề xuất một cách sử dụng tương tự. với rất nhiều kết quả của google, các phương pháp hay nhất cho svg có thể truy cập có thể đáng để tự đặt câu hỏi,

— sập

1

@RockyRoad: không thực sự - đặc tả SVG cho phép rõ ràng các thuộc tính như vậy (trái ngược với HTML / XHTML chẳng hạn). Cũng lưu ý rằng mặc dù bạn có thể (sai) sử dụng desccác phần tử mã hóa cho dữ liệu tùy ý, nhưng (IMHO) khá rõ ràng từ liên kết rằng đây không phải là mục đích dự kiến của descphần tử. Không nói là không nên làm, chỉ là có một cách tốt hơn.

— johndodo