剪切路径

剪切路径(Clipping Path)是定义图像可见区域的闭合矢量路径,路径外的所有内容被渲染为透明。数十年来它一直是印刷制作的核心技术,嵌入在 EPS 和 PSD 文件中用于从背景中分离产品照片。

关键特性和限制:

• 锐利边缘:由矢量定义,因此边缘在任何缩放比例下都保持清晰。适合 Logo 和产品轮廓
• 二值裁切:路径内完全可见,路径外完全隐藏。无法实现半透明渐变边界
• 锚点限制:过于复杂的路径(数百个锚点)可能导致印刷工作流中的 RIP(光栅图像处理器)错误

在 Web 开发中,CSS clip-path 提供等效功能:

• clip-path: circle(50%) - 圆形裁切
• clip-path: polygon(50% 0%, 100% 100%, 0% 100%) - 三角形裁切
• clip-path: url(#svgClip) - 引用 SVG <clipPath> 元素

剪切路径与蒙版的选择:需要硬边精确裁切时用剪切路径;需要柔和边缘或半透明边界时用蒙版。印刷工作流仍以剪切路径为标准,但 Web 实现通常偏好蒙版以获得更强的表现力。

在 SVG 中,在 <clipPath> 元素内定义路径,通过 clip-path="url(#id)" 应用。结合 CSS 过渡,可实现响应用户交互的动画裁切效果,无需 JavaScript 计算。