SVG平移变换下Clip Path行为异常及CSS式实现疑问

我需要澄清对SVG 1.1规范中clip-path特性的理解，尤其是在多重translate变换场景下的表现。我编写的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>

除背景矩形外，所有元素都在translate(140.5,20.5)变换下渲染。红色路径的坐标与pwtl_0组的clip-path多边形完全一致，我预期水平线会被裁剪在红色矩形范围内，但实际并未生效。

作为补充实验，我为线条添加了一个透明的同级元素，此时裁剪生效，但坐标不符合预期：

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

只有当水平线起始于clip-path多边形的左边界时，裁剪才符合预期。

我无法修改现有的两个translate变换，请问该如何设置CSS式clip-path的多边形坐标，才能让两个SVG中的黑色水平线在红色竖线处被截断？

编辑：发现将CSS内联clip-path改为引用SVG的<clipPath>元素时，渲染结果符合预期，但我仍需要CSS式clip-path的可靠解决方案：

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

内容的提问来源于stack exchange，提问作者Ganesh-AT