多个 SVG 标签中的 clipPath

Question

假设您有多个 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 标签内的定义，但事实并非如此：

• Chrome 26：两次使用 circle 剪辑路径。
• Firefox 17：两次使用 rect 剪辑路径。
• Safari 6：按预期呈现一个rect 和一个circle 剪辑路径。

当你 hide one of the SVG tags 时会变得很奇怪，因为 Chrome 和 Safari 会完全放弃 clip-path。

我知道当clipPaths 具有不同的 ID 时它可以工作，但它应该是这样吗？据我所知，spec 不包含有关该问题的信息。

Answer 1

根据 http://www.w3.org/TR/SVG/struct.html#IDAttribute 引用 http://www.w3.org/TR/2008/REC-xml-20081126/ 直接解决此特定问题，您所做的操作无效...

ID 类型的值必须与名称产生式相匹配。一个名称在 XML 文档中不能多次作为这种类型的值出现；即，ID 值必须唯一标识承载它们的元素。