clipPath trong nhiều thẻ SVG

Question

Giả sử bạn có nhiều thẻ SVG trong đó bạn xác định một đường dẫn clip khác với cùng một 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> 

Tôi cũng đã thực hiện JSFiddle. Hành vi mong đợi là gì? Tôi nghĩ rằng một yếu tố chỉ có thể tham khảo các định nghĩa bên trong thẻ SVG riêng của mình, nhưng điều đó dường như không phải là trường hợp:

• Chrome 26: Sử dụng circle đoạn đường hai lần.
• Firefox 17: Sử dụng rect đường dẫn clip hai lần.
• Safari 6: Mã số rect và một circle đường dẫn clip như mong đợi.

Thật lạ khi bạn hide one of the SVG tags vì Chrome và Safari sau đó thả hoàn toàn clip-path.

Tôi biết nó hoạt động khi các số clipPath có các ID khác nhau nhưng có phải là theo cách đó không? Theo như tôi thấy, spec không chứa thông tin về vấn đề này.

Answer 1

Những gì bạn đang làm là không hợp lệ mỗi http://www.w3.org/TR/SVG/struct.html#IDAttribute này tham chiếu http://www.w3.org/TR/2008/REC-xml-20081126/ mà giải quyết vấn đề cụ thể này trực tiếp ...

Giá trị của loại ID PHẢI phù hợp với sản xuất Tên. Một tên PHẢI KHÔNG xuất hiện nhiều hơn một lần trong một tài liệu XML như là một giá trị của loại này; tức là, các giá trị ID PHẢI xác định duy nhất các yếu tố mang chúng.