带有剪辑路径的三角形 ||过度“剪辑”的背景？

Question

我在 SVG 和剪辑路径上挣扎了一段时间。

我正在尝试创建一个三角形剪辑路径，该路径将覆盖照片以赋予顶部“三角形”边缘。

我试图实现与照片完全相同的效果，但三角形“颠倒了”。想象一下相同的三角形位于照片的顶部而不是底部。

我如何实现这一目标？我可以使用填充颜色创建三角形本身，但它仍然会显示三角形“上方”的图像。

在网上找到这个，它完全符合我的要求，但方法错误。

<svg class="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="3 0 97 102" preserveAspectRatio="none">
    <path fill="rgba(255,255,255,1)" d="M0 0 L51 102 L0 103 Z M0 205 L100 103 L100 2 Z"></path>
</svg>

Answer 1

尝试使用 SVG 编辑器，例如“Inkskape”（免费）；然后：

• 拖放您的图像，剪辑和遮盖您想要的任何内容，然后
• 另存为“普通 SVG”
• 在您最喜欢的文本编辑器中打开保存的 SVG 文件，然后删除多余的代码，例如顶部的“XML”声明以及任何其他附加内容。
• 将代码复制并粘贴到您想要的位置

快速、简单、容易;)

Answer 2

以下是如何使用带有三角形的clip-path并处理多余的“剪辑”区域：

使用剪辑路径创建三角形：

使用 SVG 编辑器：Inkscape 是一个免费且流行的选项。您可以拖放图像或在其中创建一个新三角形。

剪辑： Inkscape 允许您使用剪辑路径工具定义剪辑路径。该路径将决定图像的可见部分。

保存 SVG： 定义 clip-path 并获得所需结果后，将文件另存为纯 SVG。

优化代码（可选）：在文本编辑器中打开保存的 SVG 文件。您可以删除不必要的代码，例如开头的 XML 声明和任何额外的元素，以使代码更清晰。

过度“剪辑”的背景：

“clipped”区域是指图像中被剪辑路径隐藏的部分。您有两种选择来处理此区域：

透明背景： 使 SVG 文档的背景保持透明。这允许网页上的任何底层内容通过“剪切”区域显示。

定义的背景颜色：为您的SVG文档设置特定的背景颜色。此颜色将填充“clipped”区域，在剪辑内容周围创建视觉上定义的边框。

选择正确的方法：

最佳方法取决于您想要的视觉效果。如果您希望剪切的图像无缝地融入网页背景，请使用透明背景。如果您喜欢更明确的外观，请设置背景颜色。