使用SVG遮罩和裁剪路径将图像裁剪为特定形状

本文档详细介绍了如何使用svg的遮罩（mask）和裁剪路径（clip-path）功能，将图像裁剪为特定的SVG形状，例如三角形。我们将通过示例代码，一步步讲解如何实现这一效果，并对比两种方法的优劣。

使用裁剪路径（Clip Path）

裁剪路径通过定义一个矢量路径来决定哪些部分应该显示，哪些部分应该隐藏。 位于裁剪路径内部的区域将被显示，外部的区域将被裁剪掉。

步骤：

1. 定义裁剪路径： 在<defs>标签内创建一个<clipPath>元素，并为其指定一个唯一的id。 在<clipPath>内部，使用<path>或其他形状元素定义裁剪路径。 clip-rule=”evenodd”属性用于定义填充规则，控制复杂形状的显示效果。
2. 应用裁剪路径： 在需要裁剪的元素（例如<image>）上，使用clip-path属性，并将其值设置为url(#your-clip-path-id)，其中your-clip-path-id是你在第一步中定义的clipPath的id。

示例代码：

<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">   <defs>     <clipPath id="cp1">       <path clip-rule="evenodd"       d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />     </clipPath>    </defs>    <image width="100%" height="100%"    href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"    clip-path="url(#cp1)"/> </svg>

代码解释：

MGX

MetaGPT推出的自然语言编程工具

64

查看详情

• <svg width=”300″ viewBox=”0 0 284 178″ …>：定义了SVG画布的宽度和viewBox，viewBox定义了SVG内容的可视区域。保持viewBox的宽高比与图像一致，可以确保图像完整地填充SVG空间。
• <defs>：用于定义可重用的元素，例如裁剪路径。
• <clipPath id=”cp1″>：定义了一个id为cp1的裁剪路径。
• <path clip-rule=”evenodd” d=”…”>：定义了三角形的路径。 clip-rule=”evenodd” 指定了奇偶规则用于确定路径的哪些部分应该被裁剪。
• <image width=”100%” height=”100%” … clip-path=”url(#cp1)”/>：将图像的宽度和高度设置为100%，使其填充整个SVG空间，并将裁剪路径cp1应用到图像上。

使用遮罩（Mask）

遮罩通过灰度值来控制元素的透明度。 白色区域完全不透明，黑色区域完全透明，灰色区域则根据灰度值呈现不同程度的透明度。

步骤：

1. 定义遮罩： 在<defs>标签内创建一个<mask>元素，并为其指定一个唯一的id。 在<mask>内部，使用形状元素（例如<path>,<rect>,<circle>等）来定义遮罩的形状。 形状的填充颜色决定了对应区域的透明度：白色表示不透明，黑色表示透明。
2. 应用遮罩： 在需要遮罩的元素（例如<image>）上，使用mask属性，并将其值设置为url(#your-mask-id)，其中your-mask-id是你在第一步中定义的mask的id。

示例代码：

<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">   <defs>     <mask id="m1">       <path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"       fill="white"/>     </mask>    </defs>    <image width="100%" height="100%"    href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"    mask="url(#m1)"/> </svg>

代码解释：

MGX

MetaGPT推出的自然语言编程工具

64

查看详情

• <svg width=”300″ viewBox=”0 0 284 178″ …>：与裁剪路径示例相同，定义SVG画布的尺寸和可视区域。
• <defs>：用于定义可重用的元素，例如遮罩。
• <mask id=”m1″>：定义了一个id为m1的遮罩。
• <path d=”…” fill=”white”/>：定义了三角形的路径，并将其填充颜色设置为白色，表示该区域完全不透明。
• <image width=”100%” height=”100%” … mask=”url(#m1)”/>：将图像的宽度和高度设置为100%，使其填充整个SVG空间，并将遮罩m1应用到图像上。

裁剪路径 vs 遮罩