clipPath在多個SVG標記中

Question

假設您有多個SVG標記，每個SVG標記在其中定義一個具有相同ID的不同剪輯路徑。

<svg id="svg1" width="200" height="200"> 
    <defs> 
     <clipPath id="nodeclipper"> 
      <rect width="100" height="100" x="0" y="0" /> 
     </clipPath> 
    </defs> 
</svg> 

<svg id="svg2" width="200" height="200"> 
    <defs> 
     <clipPath id="nodeclipper"> 
      <circle cx="20" cy="0" r="40" /> 
     </clipPath> 
    </defs> 
</svg> 

我也做了JSFiddle。預期的行爲是什麼？我認爲，一個元素只能引用自己的SVG標籤中的定義，但似乎並沒有這樣的情況：

• 鉻26：使用circle夾路徑兩次。
• Firefox 17：使用rect剪輯路徑兩次。
• Safari 6：按預期呈現一個rect和一個circle剪輯路徑。

會很奇怪，當你hide one of the SVG tags因爲Chrome和Safari然後刪除clip-path完全。

我知道它適用於clipPath有不同的ID，但它應該是這樣嗎？據我看到spec不包含有關問題的信息。

Answer 1

你在做什麼是每http://www.w3.org/TR/SVG/struct.html#IDAttribute無效this引用http://www.w3.org/TR/2008/REC-xml-20081126/這直接解決了這一具體問題... ID類型

值必須匹配名稱生產。名稱不能在XML文檔中多次出現作爲此類型的值;即，ID值必須唯一地標識承載它們的元素。