11

假设您有多个 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 时它可以工作，但它应该是这样吗？据我所知，规范不包含有关该问题的信息。

4

1 回答 1

7

根据http://www.w3.org/TR/SVG/struct.html#IDAttribute，您所做的事情是无效的，这引用了http://www.w3.org/TR/2008/REC-xml-20081126/其中地址这个具体问题直接...

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

于 2013-04-09T21:43:11.553 回答