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值必须唯一地标识承载它们的元素。