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。

我知道当clipPath具有不同的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值必须唯一地标识带有它们的元素。

多个SVG标记中的clipPath

1 个答案: