为什么在 <g> <clipPath> SVG 中不起作用？

Question

下面的代码不起作用:

<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>

Answer 1

因为SVG规范是这么说的

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

描述元素
动画元素
形状元素
'文本'
"使用">

遗憾的是，<g>元素不在该列表中。

Firefox在很久以前就支持剪辑<g>元素，直到我们注意到我们没有a)按照上面的规范行事，b)与其他实现兼容，所以我们限制了我们的clipPath实现以保持一致。所以，如果你得到了Chrome和Safari板上的规范更改，我们很可能会接受。

请注意，您可以通过剪切指向<g>元素的<use>元素来解决这个问题。