SVG中可用实现任意形状图片裁剪，需将图片置于SVG内并用clip-path引用封闭路径，支持圆形、三角形、星形等，推荐使用标签配合viewBox实现响应式适配。

在 H5 页面中，用 SVG 的 可以轻松实现任意形状的图片裁剪，比如圆形、三角形、星形、心形，甚至自定义轮廓。核心是把图片（ 或 ）放在 SVG 内，并通过 clip-path 属性引用预定义的剪切路径。

基础结构：SVG + clipPath + 图片容器

最简可行方案是将图片包裹在 中，用 定义路径，再用 或直接给 设置 clip-path：

• 内必须包含一个封闭图形（如 、、），不能是文字或渐变
• 路径坐标默认按 SVG 坐标系（左上为原点），宽高建议显式设 width/height 或用 viewBox 控制缩放
• 图片推荐用 SVG 的 标签（支持 xlink:href 或 href），兼容性更好；也可用外部 配合 CSS clip-path，但功能受限

常用不规则形状写法示例

以下路径都放在 ... 中：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 圆角矩形：
• 三角形：
• 五角星：
• 自定义描边轮廓（如手绘感）：用设计工具导出 SVG 路径数据，粘贴进 ，确保闭合（末尾加 Z）

CSS clip-path 的补充用法（适合简单场景）

如果不想嵌套 SVG，可用纯 CSS 对普通 元素裁剪：

• 内置形状：clip-path: circle(50% at 50% 50%)、clip-path: polygon(0 0, 100% 0, 100% 100%)
• 引用 SVG 路径：clip-path: url(#myClip)（需确保 SVG 在页面内且 ID 可访问）
• 注意：CSS 方式不支持 标签，仅作用于块级元素；Safari 需加 -webkit-clip-path

响应式与适配要点

要让裁剪在不同屏幕下保持比例和位置稳定：

• SVG 推荐使用 viewBox="0 0 200 150" 替代固定宽高，配合 width="100%" height="auto"
• 路径坐标建议基于 viewBox 尺寸设计（如 200×150），避免用像素硬编码
• 若图片需缩放填充， 加 preserveAspectRatio="xMidYMid slice" 类似 object-fit: cover
• 移动端测试时注意 iOS Safari 对复杂 的渲染性能，过深嵌套或超多贝塞尔点可能卡顿