SVG：如何将未闭合的路径用作剪辑路径

Question

是否可以将SVG元素剪辑为未闭合的路径（例如直线）？

例如：

<svg>
  <rect x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#mask)"></rect>    
  <defs>
    <clipPath id="mask">
        <path stroke-width="10" stroke="white" d="M 0 0 L 100 100"></path>
    </clipPath>
  </defs>
</svg>

Answer 1

您可以将其用作剪辑路径，但它会剪切所有内容，因为stroke doesn't count for clipPaths。

  

每个子元素的原始几何体（不包括“clipPath”中的'fill'，'stroke'，'stroke-width'等渲染属性在概念上定义了一个1位掩码