使用 SVG 遮罩图像：clip-path 与 mask 的应用

本文将深入探讨如何使用 SVG (Scalable Vector Graphics) 中的 clip-path 和 mask 属性，将图像或 GIF 裁剪为特定的 SVG形状。我们将通过示例代码详细讲解这两种方法的实现，并分析它们之间的差异与适用场景，帮助开发者灵活运用 SVG 技术，实现各种创意性的图像处理效果。

使用 clip-path 裁剪图像

clip-path 属性允许你定义一个 SVG 图形，作为图像的裁剪路径。只有位于该路径内部的图像部分才会被显示，路径外部的部分将被隐藏。

示例代码：

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

代码解释：

1. <svg> 元素： 定义 SVG 画布的宽度和 viewBox。viewBox 属性定义了 SVG 内容的坐标系统，这里设置为 0 0 284 178，确保图像的宽高比与 viewBox 的宽高比一致。
2. <defs> 元素： 用于定义可重用的元素，例如 clipPath。
3. <clipPath> 元素： 定义一个裁剪路径，并赋予 ID cp1。
4. <path> 元素： 定义裁剪路径的形状。d 属性包含路径数据，描述了三角形的形状。clip-rule="evenodd" 定义了填充规则，这里使用 evenodd 规则，使得只有 "frame" 部分显示。
5. <image> 元素： 嵌入图像，width="100%" 和 height="100%" 使图像填充整个 SVG 画布。
6. clip-path="url(#cp1)"： 将 clipPath 应用于图像，使用其 ID 作为引用。

使用 mask 遮罩图像

mask 属性允许你使用另一个 SVG 元素作为图像的遮罩。遮罩元素的颜色决定了图像的可见程度。白色区域完全显示图像，黑色区域完全隐藏图像，灰色区域则根据灰度值显示不同程度的透明度。

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

下载

示例代码：

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

代码解释：

1. <svg> 元素： 与 clip-path 示例相同。
2. <defs> 元素： 与 clip-path 示例相同。
3. <mask> 元素： 定义一个遮罩，并赋予 ID m1。
4. <path> 元素： 定义遮罩的形状。d 属性包含路径数据，描述了三角形的形状。fill="white" 将路径填充为白色，表示该区域的图像完全显示。
5. <image> 元素： 嵌入图像，width="100%" 和 height="100%" 使图像填充整个 SVG 画布。
6. mask="url(#m1)"： 将 mask 应用于图像，使用其 ID 作为引用。

clip-path 与 mask 的区别

• 功能： clip-path 用于裁剪图像，隐藏路径外部的部分。mask 用于遮罩图像，根据遮罩元素的颜色控制图像的透明度。
• 颜色： clip-path 不考虑颜色，只考虑路径的形状。mask 则依赖于遮罩元素的颜色，白色显示，黑色隐藏，灰色控制透明度。
• 复杂性： mask 可以实现更复杂的遮罩效果，例如渐变透明度。clip-path 更适合简单的裁剪。

注意事项

• 确保 viewBox 的宽高比与图像的宽高比一致，以避免图像变形。
• clip-path 和 mask 都可以应用于其他 SVG 元素，例如 <rect>、<circle> 等。
• clip-path 和 mask 元素必须在 <defs> 元素中定义，以便重复使用。

总结

clip-path 和 mask 是 SVG 中强大的图像处理工具，它们可以帮助开发者实现各种创意性的视觉效果。选择使用哪种方法取决于具体的需求和效果。clip-path 适合简单的裁剪，而 mask 则适合更复杂的遮罩效果。熟练掌握这两种方法，可以让你在 SVG 图像处理方面更加得心应手。