为何<line>元素无法作为<clipPath>的子元素正常工作？

用作为clipPath内容时，能正常裁剪矩形：

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

但换成后，完全看不到被裁剪的内容：

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <line x1="0" y1="0" x2="1" y2="1" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

原因 #

SVG的裁剪路径（clipPath）是根据元素的填充区域判定可见范围的。本质是无面积的路径，只有描边（stroke）属性，但裁剪路径不会识别描边区域——它只认元素的填充范围。哪怕给设置了stroke-width，也不会被clipPath当作有效裁剪区域。而是闭合图形，有明确的填充区域，所以能正常生效。

解决方案 #

如果需要实现类似线条的裁剪效果，得用有填充区域的元素模拟：

方案1：用绘制带宽度的线条

通过给path设置stroke-width，让clipPath识别描边形成的区域：

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <!-- stroke-width设为0.1，对应被裁剪元素边界框的10%宽度 -->
    <path d="M0,0 L1,1" stroke-width="0.1" stroke-linecap="square" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

方案2：用模拟线条

创建细长矩形并旋转，模拟斜线效果：

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <!-- 矩形宽度设为对角线长度（√2≈1.414），高度0.1，旋转45度覆盖斜线区域 -->
    <rect x="0" y="-0.05" width="1.414" height="0.1" transform="rotate(45)" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

注意：当clipPathUnits="objectBoundingBox"时，所有尺寸都是相对于被裁剪元素的边界框（范围0~1），设置宽度、线宽时要适配这个比例。

内容的提问来源于stack exchange，提问作者Konrad