在我的頁面上有兩個具有相同值的 id 屬性：
<div id="main">
<svg width="100%" height="100%" viewBox="0 0 192 192">
<defs>
<path id="main" .....
</defs>
</svg>
</div>
這樣做好嗎？
uj5u.com熱心網友回復：
該id屬性的目的是為元素提供唯一識別符號，以便可以通過各種方式直接參考它。使用重復值違反了 HTML 和 SVG 標準，并且可能會導致問題。
在WHATWG HTML / DOM標準規定這顯然：
在 HTML 元素上指定時，id 屬性值在元素樹中的所有 ID 中必須是唯一的，并且必須至少包含一個字符。
在W3C的SVG規范使用術語“唯一的名稱”，并參考XML規范：
用于為元素分配唯一名稱的標準 XML 屬性。請參閱可擴展標記語言 (XML) 1.0 建議 [XML10]。
該XML規范又正式確立是唯一在這些條款：
ID 型別的值必須與 Name 產生式匹配。一個名稱不得在 XML 檔案中作為這種型別的值出現多次；即，ID 值必須唯一標識承載它們的元素。
在實踐中，瀏覽器對無效標記非常寬容，因此如果您實際定義了重復項，您不會只是在螢屏上看到錯誤。然而，將這個 ID 值用于任何事物都將是困難的——CSS 選擇器、JavaScript DOM API 和 URL 片段在彼此之間以及在瀏覽器之間的行為可能不一致。
uj5u.com熱心網友回復：
嚴格來說不算無效。
當 IE 是主流瀏覽器時，重復 ID（曾經是 20 到 15 年前）具有意義，
此后所有瀏覽器都復制了 IE 行為：
ID 成為參考 DOM 元素的全域變數（并且在所有瀏覽器中仍然如此）
重復的 ID 回傳（ed）所有元素的陣列（節點串列）（Firefox 現在不再這樣做）
看看你的瀏覽器做了什么：
console.log("Global variable 'main' is:",typeof main,main.length,"elements");<div id="main">
<svg>
<defs>
<circle id="main"/>
</defs>
<path id="main" />
</svg>
</div>一般來說，重復的 ID 被認為是不好的做法。
他們確實使用 SVG 模式、剪輯等中斷，其中 ID 參考至關重要。
在現代瀏覽器中，您可以使用 shadowDOM 來封裝 HTML（和 CSS）。
這允許使用相同（不再重復）的 ID
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312320.html
上一篇：在svg中移動“路徑”元素