平移变换下的 SVG 剪辑路径行为

Question

我正在寻求 StackOverflow 社区的智慧，以澄清我对 SVG 1.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) 开始的平移变换下渲染。

其下方的第一个元素组是一个红色矩形区域，具有一组特定的坐标，该坐标也与我在第二组中设置的剪辑路径多边形形状相匹配。

第二组下方是另一个具有单水平线的元素组。

我的期望是遮罩多边形将与之前指定的红色矩形相同，并且水平线将被剪切到红色矩形内，但不幸的是事实并非如此。

作为额外的实验，我在这条线上添加了一个“不可见”同级，现在我确实得到了一些剪切行为，但剪切坐标与我的期望不符。

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

剪切按预期工作的唯一时间是要剪切的黑色水平线从剪切路径中指定的多边形的左边界开始。

如果我希望上面两个 SVG 中的黑色水平线在红色垂直线处被切断，我应该如何准确地构建剪切路径多边形的坐标？不幸的是，我无法更改这两个翻译转换规范。因此，我正在寻找一种可靠的解决方案，可以与现有的翻译一起使用。

编辑：有趣的是，如果我将 CSS 样式中的内联剪辑路径规范“转换”为 SVG 样式“url”/clipPath 方案，则渲染将按预期进行（对于没有不可见同级的第一个 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 样式的剪辑路径规范可靠地工作。

Answer 1

• CSS 剪辑路径作用于被剪辑对象的几何框，即您获得形状的边界框，然后剪辑路径与之相关。

• 具有 userSpaceOnUse 单位（默认）的 SVG 剪辑路径与引用 ClipPath 元素的元素使用相同的坐标系。

不同的坐标系，不同的结果。