clipPath w wielu tagach SVG

Question

Załóżmy, że masz wiele tagów SVG, gdzie w każdej definiujesz inną ścieżkę klipu z tym samym identyfikatorem.

<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> 

Wykonałem również JSFiddle. Jakie jest oczekiwane zachowanie? Myślałem, że element mógłby odwołać tylko definicje wewnątrz własnego tagu SVG, ale to nie wydaje się być w przypadku:

• Chrome 26: Używa circle ścieżkę klipu dwa razy.
• Firefox 17: Używa ścieżki klipu rect dwa razy.
• Safari 6: Renderuje jedną ścieżkę klipu rect i jedną circle zgodnie z oczekiwaniami.

Robi się dziwnie, gdy hide one of the SVG tags, ponieważ Chrome i Safari całkowicie upuszczają clip-path.

Wiem, że działa, gdy clipPath s mają różne identyfikatory, ale czy ma tak być? O ile widzę, spec nie zawiera informacji o problemie.

Answer 1

Co robisz jest nieważny za http://www.w3.org/TR/SVG/struct.html#IDAttribute ten odwołuje http://www.w3.org/TR/2008/REC-xml-20081126/ która rozwiązuje ten konkretny problem bezpośrednio ...

Wartości typu ID musi dopasować produkcję Nazwa. Nazwa NIE MOŻE pojawiać się więcej niż jeden raz w dokumencie XML jako wartość tego typu; tj. wartości ID MUSZĄ jednoznacznie identyfikować elementy, które je noszą.