svg - 多个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完全。

我知道它在 clipPath 时有效s 有不同的 ID，但它应该是那样的吗？据我所知 spec不包含有关该问题的信息。

Answer 1

您在做什么是无效的 http://www.w3.org/TR/SVG/struct.html#IDAttribute此引用 http://www.w3.org/TR/2008/REC-xml-20081126/它直接解决了这个特定问题......

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