เอกสาร SVG รองรับแอตทริบิวต์ข้อมูลที่กำหนดเองหรือไม่

87

ใน HTML5 องค์ประกอบสามารถมีข้อมูลเมตาที่กำหนดเองเก็บไว้ในแอตทริบิวต์ XML ที่มีชื่อขึ้นต้นด้วยdata-เช่น<p data-myid="123456">. นี่เป็นส่วนหนึ่งของสเป็ค SVG ด้วยหรือเปล่า?

ในทางปฏิบัติเทคนิคนี้ใช้ได้ดีกับเอกสาร SVG ในหลาย ๆ ที่ แต่ฉันต้องการทราบว่าเป็นส่วนหนึ่งของข้อกำหนด SVG อย่างเป็นทางการหรือไม่เนื่องจากรูปแบบยังเล็กพอที่จะยังมีความเข้ากันไม่ได้ระหว่างเบราว์เซอร์โดยเฉพาะในอุปกรณ์เคลื่อนที่ ดังนั้นก่อนที่จะยอมรับรหัสฉันต้องการทราบว่าฉันสามารถคาดหวังว่าเบราว์เซอร์ในอนาคตจะรวมกันเพื่อรองรับสิ่งนี้หรือไม่

ฉันพบข้อความนี้จากรายชื่ออีเมลของคณะทำงานโดยระบุว่า "คาดหวังว่า [พวกเขา] จะ" จะสนับสนุน สิ่งนี้กลายเป็นทางการหรือไม่?

svg  web-standards 
— Leopd
แหล่งที่มา

คำตอบ:

121

ในขณะที่คำตอบอื่น ๆ มีเทคนิคที่ถูกต้องพวกเขาละเว้นความจริงที่ว่า SVG data-*ให้กลไกทางเลือกสำหรับ SVG อนุญาตให้รวมแอตทริบิวต์และแท็กได้ตราบใดที่ไม่ขัดแย้งกับที่มีอยู่ (หรืออีกนัยหนึ่งคือคุณควรใช้เนมสเปซ)

ในการใช้กลไกนี้ (เทียบเท่า):

  • ใช้mydata:idแทนdata-myidดังนี้:<p mydata:id="123456">
  • ตรวจสอบให้แน่ใจว่าคุณกำหนดเนมสเปซในแท็กเปิด SVG ดังนี้: <svg xmlns:mydata="http://www.myexample.com/whatever">

แก้ไข: SVG2ซึ่งปัจจุบันคำแนะนำสำหรับผู้สมัคร W3C (04 ตุลาคม 2018) จะรองรับdata-โดยตรง (โดยไม่มีเนมสเปซเช่นเดียวกับ HTML) อาจต้องใช้เวลาสักครู่ก่อนที่การสนับสนุนจะแพร่หลาย ขอบคุณสำหรับ @cvrebert ชี้ให้เห็นนี้

— johndodo
แหล่งที่มา
7
ส่วนที่สามของสมการ: el.getAttribute('mydata:id')เพื่อรับข้อมูลที่คุณแนบไปกับองค์ประกอบ SVG (หมายเหตุ: หากคุณใช้ d3 เนมสเปซจะถูกตัดออกโดยค่าเริ่มต้นและคุณจะทำได้el.getAttribute('id'))
— ericsoco
2
นี่ควรเป็นคำตอบที่ได้รับการยอมรับ SVG เป็นส่วนขยายของ XML ซึ่งช่วยให้คุณสามารถใช้แท็กจากเนมสเปซต่างๆ
— Melle
1
เหตุใดจึงต้องกำหนดเนมสเปซ เหตุใดการประกาศเนมสเปซ HTML5 ในเอกสารจึงไม่เพียงพอที่จะใช้data-*ใน SVG
— Fabien Snauwaert
2
FYI ไม่ว่าจะใช้เนมสเปซส่วนตัว (เช่น<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>:) หรือเนมสเปซ xhtml ก็จะไม่ตรวจสอบความถูกต้องบนvalidator.w3.org/check (โดยใช้ SVG 1.1) แต่ทั้งสองอย่างทำงานในเบราว์เซอร์ จากนั้นจึงเป็นไปได้ที่จะใช้อย่างใดอย่างหนึ่งgetAttributeหรือgetAttributeNSดึงข้อมูล
— Fabien Snauwaert
29

data-*แอตทริบิวต์เป็นส่วนหนึ่งของ HTML5 ไม่ใช่แอตทริบิวต์ XML ทั่วไป

คำแนะนำ SVG W3C ปัจจุบันคือSVG 1.1 (จาก 2011-08) มันไม่ได้ช่วยให้แอตทริบิวต์นี้ที่คุณสามารถตรวจสอบในรายชื่อแอตทริบิวต์

เดียวกันเป็นกรณีสำหรับร่าง SVG 2 ทำงาน (2012-08) อัปเดต (2015) : ดูเหมือนว่าตั้งใจจะรองรับdata-*แอตทริบิวต์ในSVG 2 (ปัจจุบันยังคงเป็น Working Draft)

— unor
แหล่งที่มา
19

data-*แอตทริบิวต์ขององค์ประกอบ SVG ได้รับการสนับสนุนอย่างเป็นทางการในร่างปัจจุบันของ SVG2 ดู:

— cvrebert
แหล่งที่มา
9

มีกลไกทั่วไปมากขึ้น

svg รองรับdescองค์ประกอบที่อาจมี xml ที่กำหนดเองจากเนมสเปซอื่น เชื่อมโยงอินสแตนซ์ขององค์ประกอบนี้หรือโหนดลูกจากเนมสเปซของคุณเองโดยขึ้นอยู่กับรหัสหรือแอตทริบิวต์อ้างอิง

นี้เป็นส่วนที่เกี่ยวข้องของข้อมูลจำเพาะ (5.4)

— ยุบ
แหล่งที่มา
1
ขอบคุณสำหรับตัวชี้ ฉันควรสรุป SVG ไม่สนับสนุนdata-แอตทริบิวต์อย่างเป็นทางการหรือไม่?
— Leopd
2
ไม่ได้descมีไว้เพื่อประโยชน์ในการเข้าถึง?
— matanster
@matt ฉันไม่คิดอย่างนั้นอย่างน้อยก็ขึ้นอยู่กับ Stabndard
— ยุบ
1
@matt ไม่จำเป็น Afaik มาตรฐานจะกล่าวถึงวัตถุประสงค์ของคำอธิบายประกอบเท่านั้นโดยไม่ขึ้นกับการแสดงผลใด ๆ สิ่งนี้ไม่ขัดแย้งกับความเหมาะสมขององค์ประกอบสำหรับวัตถุประสงค์ โดยเฉพาะมีบล็อกโพสต์ที่กล่าวถึงการใช้aria-labelledbyคุณลักษณะและองค์ประกอบรายละเอียดเป็นป้ายกำกับที่สามารถเข้าถึงได้ MDNแนะนำให้ใช้ที่คล้ายกัน จากผลการค้นหาของ Google มากมายเหลือเฟือแนวทางปฏิบัติที่ดีที่สุดสำหรับ svg ที่สามารถเข้าถึงได้อาจคุ้มค่ากับคำถามของตัวเอง
— collarsar
1
@RockyRoad: ไม่จริง - ข้อกำหนด SVG อนุญาตให้ใช้แอตทริบิวต์ดังกล่าวอย่างชัดเจน (ซึ่งตรงข้ามกับเช่น HTML / XHTML ซึ่งไม่มี) โปรดทราบว่าในขณะที่คุณสามารถ (ผิด) ใช้descองค์ประกอบ ription สำหรับข้อมูลโดยพลการ (IMHO) ค่อนข้างชัดเจนจากลิงก์ว่านี่ไม่ใช่จุดประสงค์ของdescองค์ประกอบ ไม่ได้บอกว่าคุณไม่ควรทำเพียงแค่ว่ามีวิธีที่ดีกว่า
— johndodo
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.