我正在寻求StackOverflow社区的智慧，以澄清我对SVG1.1规范中的剪辑路径特性的理解，特别是在多重翻译转换下.
我提出了以下SVG片段，它提供了与我对SVG规范(跨所有浏览器)的理解相反的结果:
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300">
<g id="wave_0">
<rect width="500" height="300" style="stroke:#000;fill:white"></rect>
<g transform="translate(140.5,20.5)">
<g id="expcb_0">
<path style="stroke:#f00;fill:none" d="M 0 -2 L 200 -2 L 200 200 L 0 200 Z"></path>
</g>
<g id="pwtl_0" clip-path="polygon(0 -2, 200 -2, 200 200, 0 200)">
<g transform="translate(0,55)">
<path style="stroke:#000;stroke-width:1px" d="M 80 0 L 280 0"></path>
</g>
</g>
</g>
</g>
</svg>除500x300矩形背景外的所有SVG元素都在从(140.5，20.5)开始的平移变换下渲染.
它下面的第一个元素组是一个红色的矩形区域，它具有一组特定的坐标，也与我正在设置的第二个组的剪裁路径多边形匹配.
在第二个组下面是另一个具有一条水平线的元素组.
我的预期是遮罩多边形将与前面指定的红色矩形相同，并且水平线将被剪裁到红色矩形内，但不幸的是情况并非如此.
Rendering of above SVG in Chrome 121.0.6164.0 Canary
作为一个额外的实验，我在这条线上添加了一个‘不可见’sibling 项，现在我确实得到了一些裁剪行为，但裁剪坐标与我的预期不符.
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300">
<g id="wave_0">
<rect width="500" height="300" style="stroke:#000;fill:white"></rect>
<g transform="translate(140.5,20.5)">
<g id="expcb_0">
<path style="stroke:#f00;fill:none" d="M 0 -2 L 200 -2 L 200 200 L 0 200 Z"></path>
</g>
<g id="pwtl_0" clip-path="polygon(0 -2, 200 -2, 200 200, 0 200)">
<g transform="translate(0,55)">
<path style="stroke:#000;stroke-width:1px" d="M 80 0 L 280 0"></path>
</g>
<g transform="translate(0,65)">
<path style="stroke:#000;stroke-width:1px;stroke-opacity:0" d="M -20 0 L 280 0"></path>
</g>
</g>
</g>
</g>
</svg>Rendering of above SVG in Chrome 121.0.6164.0 Canary个
只有当要剪裁的黑色水平线从剪裁路径中指定的多边形的左边界开始时，剪裁才能按预期工作.
如果我希望上面两个SVG中的黑色水平线在红色垂直线处被截断，我到底应该如何框出剪裁路径多边形的坐标？遗憾的是，我不能更改这两个翻译转换规范.因此，我正在寻找一种可靠的解决方案，可以与适当的翻译工作.
Edit:有趣的是，如果我将css样式的内联剪辑路径规范‘转换’为SVG样式的‘url’/clipPath方案，则呈现效果与预期一致(对于第一个没有不可见sibling 项的SVG):
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300">
<defs>
<clipPath id="D0_PWTL">
<polygon points="0,-2,200,-2,200,200,0,200"></polygon>
</clipPath>
</defs>
<g id="wave_0">
<rect width="500" height="300" style="stroke:#000;fill:white"></rect>
<g transform="translate(140.5,20.5)">
<g id="expcb_0">
<path style="stroke:#f00;fill:none" d="M 0 -2 L 200 -2 L 200 200 L 0 200 Z"></path>
</g>
<!-- <g id="pwtl_0" clip-path="polygon(0 -2, 200 -2, 200 200, 0 200)"> -->
<g id="pwtl_0" clip-path="url(#D0_PWTL)">
<g transform="translate(0,55)">
<path style="stroke:#000;stroke-width:1px" d="M 80 0 L 280 0"></path>
</g>
</g>
</g>
</g>
</svg>我还在研究如何让css风格的剪辑路径规范可靠地工作.