SVG中可用实现任意形状图片裁剪，需将图片置于SVG内并用clip-path引用封闭路径，支持圆形、三角形、星形等，推荐使用标签配合viewBox实现响应式适配。
在 H5 页面中，用 SVG 的 <clippath></clippath> 可以轻松实现任意形状的图片裁剪，比如圆形、三角形、星形、心形，甚至自定义轮廓。核心是把图片（<img alt="H5 中怎么使用 SVG 剪切路径 clipPath 实现不规则图片裁剪" > 或 <image></image>）放在 SVG 内，并通过 clip-path 属性引用预定义的剪切路径。
基础结构：SVG + clipPath + 图片容器
最简可行方案是将图片包裹在 <svg></svg> 中，用 <defs></defs> 定义路径，再用 <g clip-path="url(#id)"></g> 或直接给 <image></image> 设置 clip-path：
-
<clippath id="myClip"></clippath>内必须包含一个封闭图形（如<circle></circle>、<polygon></polygon>、<path></path>），不能是文字或渐变 - 路径坐标默认按 SVG 坐标系（左上为原点），宽高建议显式设
width/height或用viewBox控制缩放 - 图片推荐用 SVG 的
<image></image>标签（支持xlink:href或href），兼容性更好；也可用外部<img alt="H5 中怎么使用 SVG 剪切路径 clipPath 实现不规则图片裁剪" >配合 CSSclip-path，但功能受限
常用不规则形状写法示例
以下路径都放在 <defs><clippath id="xxx">...</clippath></defs> 中：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
圆角矩形：
<rect x="0" y="0" width="200" height="150" rx="20" ry="20"></rect> -
三角形：
<polygon points="100,0 0,150 200,150"></polygon> -
五角星：
<path d="M100,10 L130,80 L210,80 L145,130 L175,200 L100,160 L25,200 L55,130 L0,80 L80,80 Z"></path> -
自定义描边轮廓（如手绘感）：用设计工具导出 SVG 路径数据，粘贴进
<path d="..."></path>，确保闭合（末尾加Z）
CSS clip-path 的补充用法（适合简单场景）
如果不想嵌套 SVG，可用纯 CSS 对普通 <img alt="H5 中怎么使用 SVG 剪切路径 clipPath 实现不规则图片裁剪" > 元素裁剪：
- 内置形状：
clip-path: circle(50% at 50% 50%)、clip-path: polygon(0 0, 100% 0, 100% 100%) - 引用 SVG 路径：
clip-path: url(#myClip)（需确保 SVG 在页面内且 ID 可访问） - 注意：CSS 方式不支持
<image></image>标签，仅作用于块级元素；Safari 需加-webkit-clip-path
响应式与适配要点
要让裁剪在不同屏幕下保持比例和位置稳定：
- SVG 推荐使用
viewBox="0 0 200 150"替代固定宽高，配合width="100%" height="auto" - 路径坐标建议基于 viewBox 尺寸设计（如 200×150），避免用像素硬编码
- 若图片需缩放填充，
<image></image>加preserveAspectRatio="xMidYMid slice"类似object-fit: cover - 移动端测试时注意 iOS Safari 对复杂
<path></path>的渲染性能，过深嵌套或超多贝塞尔点可能卡顿
