SVG嵌入外部图片并裁剪的核心是用<image>引入位图，再通过<defs>内的<clipPath>定义可见区域，最后用clip-path属性应用；全程无需JavaScript，支持响应式与降级方案。

在网页开发中，SVG 嵌入外部图片并裁剪，核心是用 <image> 元素引入位图（如 PNG/JPEG），再通过 <clipPath> 定义可见区域，最后用 clip-path 属性将其应用。整个过程不依赖 JavaScript，纯 SVG + CSS 即可实现，且保持矢量缩放优势。

用 <image> 引入外部图片

SVG 中的 <image> 元素支持直接引用外部图片 URL，需指定位置（x/y）和尺寸（width/height）。注意：现代浏览器已支持简写 href 属性，无需再写 xlink:href（后者仅兼容旧版）。

• 基础写法：<image href="photo.jpg" x="0" y="0" width="400" height="300"/>
• 推荐加上 preserveAspectRatio="xMidYMid meet"，避免拉伸变形
• 图片路径支持相对路径、绝对 URL，甚至 Data URL（适合小图标内联）

定义裁剪路径 <clipPath>

<clipPath> 必须放在 <defs> 内部，才能被复用；它本身不渲染，只定义“哪些区域可见”。内部可使用 <rect>、<circle>、<path> 或 <text> 等任意基础图形。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用矩形裁剪：<rect x="50" y="30" width="200" height="150"/>
• 用圆形裁剪：<circle cx="150" cy="100" r="80"/>
• 用自定义路径裁剪（如心形、不规则轮廓）：<path d="M100,50 C120,20 180,20 200,50 ..."/>
• 加 clipPathUnits="objectBoundingBox" 可改用 0–1 的相对单位，便于响应式适配

将裁剪路径应用到图片上

在 <image> 元素上添加 clip-path 属性，值为 url(#id)，指向 <clipPath> 的 id。该属性既可在 SVG 内联书写，也可通过 CSS 外部控制。

• SVG 内联写法：<image href="photo.jpg" clip-path="url(#myClip)" ... />
• CSS 控制（更灵活）：image { clip-path: url(#myClip); } 或 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
• 注意：若裁剪区域超出图片原始尺寸，裁剪仍有效——只显示重叠部分

补充技巧：响应式与 fallback

为确保不同屏幕下裁剪效果稳定，建议结合 viewBox 和相对单位；同时对不支持 SVG 裁剪的老旧环境提供降级方案。

• 给 SVG 根元素设置 viewBox="0 0 400 300"，让内部坐标自动缩放
• 用 CSS 的 clip-path: circle(50% at 50% 50%) 实现纯 CSS 圆形裁剪（适用于简单场景）
• 对关键内容，可用 <img> 标签兜底：<img src="photo.jpg" alt="..." class="fallback-circle">，配合 CSS border-radius: 50%