如何在SVG中使用clipPath将图片适配叠加到矩形内？

你当前的代码已使用clipPath限制图片显示区域，但<image>元素未设置正确的位置与尺寸，导致仅显示图片左上角部分，无法适配目标矩形。目标矩形的位置为x="286" y="268"，尺寸为width="310" height="107"，需让图片对齐该区域并适配尺寸，以下是两种解决方案：

1. 拉伸图片填满矩形 #

直接将<image>的x、y、width、height属性与目标矩形完全匹配，图片会被拉伸填满整个矩形区域：

<svg width="665" height="455" viewBox="0 0 665 455" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="clipme">
            <rect x="286" y="268" width="310" height="107" rx="10" />
        </clipPath>  
    </defs>
    <rect x="286" y="200" width="205" height="6" rx="3" fill="#aaa"/>
    <rect x="286" y="220" width="310" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="230" width="297" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="240" width="271" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="250" width="239" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="268" width="310" height="107" rx="10" fill="#F7F4FB"/>
    <!-- 修改image的位置和尺寸，匹配目标矩形 -->
    <image xlink:href="https://i.sstatic.net/MJkK0.jpg" 
           x="286" y="268" width="310" height="107" 
           clip-path="url(#clipme)" />
</svg>

2. 保持图片比例居中适配（不拉伸） #

若不想拉伸图片，希望保留原图比例并居中显示，超出部分自动裁剪，可添加preserveAspectRatio="xMidYMid slice"属性：

<svg width="665" height="455" viewBox="0 0 665 455" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="clipme">
            <rect x="286" y="268" width="310" height="107" rx="10" />
        </clipPath>  
    </defs>
    <rect x="286" y="200" width="205" height="6" rx="3" fill="#aaa"/>
    <rect x="286" y="220" width="310" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="230" width="297" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="240" width="271" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="250" width="239" height="4" rx="2" fill="#E5D0FF"/>
    <rect x="286" y="268" width="310" height="107" rx="10" fill="#F7F4FB"/>
    <!-- 保持图片比例，居中裁剪适配矩形 -->
    <image xlink:href="https://i.sstatic.net/MJkK0.jpg" 
           x="286" y="268" width="310" height="107" 
           preserveAspectRatio="xMidYMid slice"
           clip-path="url(#clipme)" />
</svg>

preserveAspectRatio="xMidYMid slice"的作用是让图片在水平、垂直方向居中，按矩形尺寸裁剪超出部分，既保证图片不变形，又能填满整个矩形区域，符合你期望的效果。

内容的提问来源于stack exchange，提问作者Sha