如何将 SVG 剪辑到笔划内部？答案

【问题标题】：How to clip an SVG to the inside of the stroke?如何将 SVG 剪辑到笔划内部？
【发布时间】：2020-07-31 09:26:54
【问题描述】：

我正在尝试剪裁 SVG 以消除两侧的笔划：具体来说，使用红色矩形剪裁此平行四边形以获得右侧的结果。

（形状是恒定的，但大小和笔划可能是可变的，所以我试图避免直接用笔划宽度做数学）

我阅读了很多关于 CSS 裁剪的教程，其中通常有一些使用多边形裁剪路径的简单示例，然后深入到 BNF 语法的 sn-ps 描述如何在没有任何有意义示例的情况下使用几何框。

This page 在“使用几何框值剪切元素”部分中的剪切路径上说剪切路径可以指定一个几何框，该几何框定义了百分比相对于什么，其中一个选项是填充框。

.clip-me { 剪辑路径：多边形(10% 20%, 20% 30%, 50% 80%) 边距框；保证金：10%； }

对于 SVG 元素，[geometry-box] 可以是填充框、描边框和视图框。值 view-box 将使用最近的 SVG 如果没有指定视图框，则视口作为参考框。

我将此解释为意味着用填充框替换边距框将设置多边形相对于我的示例中的蓝色矩形（路径填充的边界框），所以我可以制作一个只有 100% 宽度的多边形, >100% 高度矩形。在实践中，当我将样式设置为"clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%) fill-box" 时，它根本不会剪辑，而是在没有指定几何框的情况下将其剪辑到笔划的中线。

有没有办法设置相对于 SVG 路径填充的边界框的剪切路径，以便我可以将其剪切到红色框，或者通过其他方式删除这些边线并保留填充？

我的最小可重现示例：

<html>

<body>
  <svg width="960" height="960">
      <g stroke-width="15" stroke="#000">
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc" 
              style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%);" >
        </path>
      </g>
    </svg>
</body>

</html>

【问题讨论】：

标签： html css svg

【解决方案1】：

正如chriskirknielsen 的回答所说，默认情况下，SVG 笔划以路径为中心绘制。不用复制路径，可以使用paint-order属性让填充画在描边上方，这样描边的内部就不可见了。

请注意，要保持笔触的视觉宽度，您需要将其宽度加倍，因为实际上有一半被填充覆盖了。

<html>

<body>
  <svg width="960" height="960">
      <g stroke-width="30" stroke="#000">
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc" 
              style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%); paint-order: stroke;" >
        </path>
      </g>
    </svg>
</body>

</html>

【讨论】：

我每个月都了解那个属性，然后忘记了……这确实更好！
嗯 - 这确实非常有效地实现了我想要的。出于兴趣，我正在尝试做的事情是否可能，还是我误解了教程告诉我的有关填充框的内容？

【解决方案2】：

SVG 中的笔划在路径的两侧“溢出”，例如，10px 笔划的外部将有 5px，而内部将有 5px（覆盖填充区域），看起来就像您的示例中正在发生的事情一样。您可以将您的clip-path 放在组中，并复制您的路径：下面：笔划；上图：填充物。

<html>

<body>
  <svg width="960" height="960">
      <g style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%);">
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" stroke-width="15" stroke="#000"/>
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc"/>
        </path>
      </g>
    </svg>
</body>

</html>

【讨论】：