多个 SVG 标签中的 clipPath

Posted 2023-03-06

【中文标题】多个 SVG 标签中的 clipPath

【英文标题】：clipPath in multiple SVG tags

【发布时间】：2013-04-01 11:02:45

【问题描述】：

假设您有多个 SVG 标记，在每个标记中您定义具有相同 ID 的不同剪辑路径。

<svg id="svg1"  >
    <defs>
        <clipPath id="nodeclipper">
            <rect   x="0" y="0" />
        </clipPath>
    </defs>
</svg>

<svg id="svg2"  >
    <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 不包含有关该问题的信息。

【参考方案1】：

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

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

【讨论】：

赞成参考规范。虽然它在技术上是正确的，但在 SVG 文档如何嵌入页面的上下文中，它也是一种非常好的心理行为。 SVG 通常是从各种来源中提取出来的，为了让用户不得不解析和重新伪命名空间来避免潜在的冲突，这是非常不友好的。

另外，鉴于 html 文档（非 xml）中有两个单独的 svg 文档（xml）——这是否属于同一规范？

只有一份文件。

@AidanKane 我完全同意！我几乎疯了，试图调试为什么剪辑路径显示不正确。谢谢你！