clipPath in più tag SVG

Question

Supponiamo di avere più tag SVG in cui in ognuno di essi viene definito un percorso di clip diverso con lo stesso 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> 

Ho anche creato un JSFiddle. Qual è il comportamento previsto? Ho pensato che un elemento potrebbe fare riferimento solo le definizioni all'interno il proprio tag SVG, ma che non sembra essere il caso:

• Chrome 26: Usa circle clip percorso due volte.
• Firefox 17: utilizza il percorso di clip rect due volte.
• Safari 6: restituisce uno rect e un percorso di clip circle come previsto.

Diventa strano quando si hide one of the SVG tags perché Chrome e Safari rilasciano quindi il clip-path interamente.

So che funziona quando gli clipPath hanno ID diversi ma dovrebbe essere in questo modo? Per quanto vedo il spec non contiene informazioni sul problema.

Answer 1

Quello che state facendo non è valido per http://www.w3.org/TR/SVG/struct.html#IDAttribute this fa riferimento http://www.w3.org/TR/2008/REC-xml-20081126/ che risolve questo problema specifico direttamente ...

I valori di tipo ID devono corrispondere alla produzione del Name. Un nome NON DEVE apparire più di una volta in un documento XML come valore di questo tipo; cioè, i valori ID DEVONO identificare in modo univoco gli elementi che li supportano.