多个SVG标签中的clipPath [英] clipPath in multiple SVG tags

问题描述

假设您有多个SVG标签，其中每个标签都定义了具有相同ID的不同剪辑路径.

Suppose you have multiple SVG tags where in each you define a different clip path with the same 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标签内引用定义，但事实并非如此:

I also made a JSFiddle. What is the expected behaviour? I thought that an element could only reference definitions inside its own SVG tag, but that doesn't seem to be the case:

• Chrome 26:两次使用circle剪切路径.
• Firefox 17:两次使用rect剪辑路径.
• Safari 6:按预期渲染一个rect和一个circle剪辑路径.

• Chrome 26: Uses circle clip path two times.
• Firefox 17: Uses rect clip path two times.
• Safari 6: Renders one rect and one circle clip path as expected.

当您隐藏SVG标签之一时，它会变得很奇怪，因为Chrome和Safari会删除clip-path完全.

It gets weird when you hide one of the SVG tags because Chrome and Safari then drop the clip-path entirely.

我知道当clipPath具有不同的ID时，它可以工作，但是应该那样吗?据我所见，规范不包含有关此问题的信息

I know it works when the clipPaths have different IDs but is it supposed to be that way? As far as I see the spec doesn't contain information about the issue.

推荐答案

每个 http://www.w3.org/TR/SVG/struct.html#IDAttribute 引用了

What you are doing is invalid per http://www.w3.org/TR/SVG/struct.html#IDAttribute this references http://www.w3.org/TR/2008/REC-xml-20081126/ which addresses this specific issue directly...

ID类型的值必须与Name产生的值匹配.名称在XML文档中不得超过此类型的值出现一次；即ID值必须唯一标识承载它们的元素.

这篇关于多个SVG标签中的clipPath的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！