为什么<；g>；不在<；克利帕斯>；在svg中？_Svg

为什么<；g>；不在<；克利帕斯>；在svg中？

svg

为什么<；g>；不在<；克利帕斯>；在svg中？,svg,Svg,以下代码不起作用： <svg> <defs> <clipPath id="test"> <g> <rect x="0" y="0" width="10" height="10"></rect> </g>

以下代码不起作用：

<svg>
    <defs>
        <clipPath id="test">
            <g>
                <rect x="0" y="0" width="10" height="10"></rect>
            </g>
        </clipPath>
    </defs>
    <rect x="0" y="0" width="100" height="100" clip-path="url(#test)"></rect>
</svg>

但这确实有效：

<svg>
    <defs>
        <clipPath id="test">
            <rect x="0" y="0" width="10" height="10"></rect>
        </clipPath>
    </defs>
    <rect x="0" y="0" width="100" height="100" clip-path="url(#test)"></rect>
</svg>

在我的项目中，我在group标记中有一些路径，我希望将该组重用为clipPath目标，同时显示路径。例如：

<svg>
    <defs>
        <g id="group">
            <path d="..."></path>
            <path d="..."></path>
            <path d="..."></path>
            <path d="..."></path>
        </g>
        <clipPath id="test">
            <use xlink:href="#group" fill="#000"></use>
        </clipPath>
    </defs>
    <!-- show the stroke of the group -->
    <use xlink:href="#group" stroke="#000"></use>
    <!-- at same time, clip the rect to make some animation as the background -->
    <rect x="0" y="0" width="100" height="100" clip-path="url(#test)"></rect>
</svg>

因为SVG规范

内容模型：
以下任意数量的元素，按任意顺序排列：

描述性元素
动画元素
形状元素
“文本”
“使用”

不幸的是，

元素不在该列表中

Firefox很久以前就支持剪裁

元素，直到我们注意到我们没有a）按照上述规范行事，b）与其他实现兼容，所以我们限制clipPath实现的一致性。所以，如果你把Chrome和Safari放在船上进行规格更改，我们可能会同意

请注意，您可以通过剪切指向

元素的

元素来解决此问题。