如何用html5实现自定义形状图片裁剪功能？

本文共计929个文字，预计阅读时间需要4分钟。

HTML5 本身不提供直接将图片裁剪成心形/星形等形状的原生 API。但可以通过 CSS3 的 `clip-path` 属性或 SVG 来实现这一效果。以下是一个使用 CSS `clip-path` 的简单示例：

注意：IE 完全不支持，Edge 旧版（

• clip-path: circle(50% at 50% 50%) → 圆形裁剪（居中，半径为宽高最小值的一半）
• clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) → 矩形（等效于无裁剪）
• clip-path: path("M20,50 Q50,10 80,50 T140,50") → 使用 SVG path 字符串（需转义双引号，且 Safari 对 path() 支持较晚）

用内联 SVG <clipPath> 精确控制复杂轮廓

当需要五角星、波浪边、手绘路径等非规则图形时，clip-path 的 path() 函数可能受限（尤其 Safari 15.4 之前），更稳妥的方式是把 <clipPath> 定义在 SVG 中，再通过 URL 引用。

关键点：SVG <clipPath> 必须放在 <defs> 内，且引用时路径需带 ID；图片要用 <img> 标签（不能是 CSS background-image），否则裁剪不生效。