多个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剪辑路径.

当你隐藏其中一个SVG标签时会很奇怪,因为Chrome和Safari会clip-path完全掉线.

我知道它有效,当clipPaths有不同的ID,但它应该是这样吗？据我所知,该规范不包含有关该问题的信息.

Answer 1

你在做什么是每无效http://www.w3.org/TR/SVG/struct.html#IDAttribute此引用http://www.w3.org/TR/2008/REC-xml-20081126/哪些地址这个具体问题直接......

类型ID的值必须与名称生成匹配.名称绝不能在XML文档中出现多次作为此类型的值; 即,ID值必须唯一地标识承载它们的元素.