Question

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

（形状是恒定的，但是大小和笔触可能是可变的，所以我在尝试避免直接用笔触宽度进行数学运算）

我已经阅读了很多有关CSS裁剪的教程，这些教程通常都有一些使用多边形裁剪路径的简单示例，然后深入介绍了BNF语法的片段，描述了如何在没有任何有意义的示例的情况下使用geometry-box。

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

.clip-me {剪切路径：多边形（10％20％，20％30％，50％80％）边距框；保证金：10％； }

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

我将其解释为在示例中将margin-box替换为fill-box将设置相对于蓝色矩形的多边形（路径填充的边界框），因此我可以制作宽度仅为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>

Answer 1

路径两边的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>

Answer 2

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

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

2 个答案: