如何在SVG blob不规则图形内插入图片且不超出图形边界

你的裁剪失效主要有两个核心问题：

1. 未使用标准的<clipPath>标签定义裁剪规则，SVG的clip-path属性无法直接引用普通path元素作为裁剪边界
2. 原blob路径外层带有translate变换，直接引用时裁剪路径坐标与图片坐标体系不匹配，导致裁剪位置错位

修正步骤 #

• 首先在SVG内新增<defs>定义区块，在区块内声明<clipPath>元素，将原blob路径平移到正确位置后放入该元素内
• 将image元素的clip-path属性指向你声明的clipPath元素的id即可
• 如果不需要显示蓝色的blob底色，可以删除原来的普通path渲染代码，只保留clipPath内部的路径定义

修正后可直接运行的代码 #

<svg id="visual" viewBox="0 0 500 500" width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <!-- 定义裁剪路径 -->
    <defs>
        <clipPath id="blobClip">
            <!-- 保留原路径的平移变换，保证位置匹配 -->
            <g transform="translate(292.7 145.85)">
                <path d="M189.3 52.1C189.3 166.7 94.7 333.3 -21.3 333.3C-137.3 333.3 -274.7 166.7 -274.7 52.1C-274.7 -62.5 -137.3 -125 -21.3 -125C94.7 -125 189.3 -62.5 189.3 52.1"/>
            </g>
        </clipPath>
    </defs>
    <rect x="0" y="0" width="500" height="500" fill="#fff"></rect>
    <!-- 如果你需要保留蓝色blob底色，可以把下面这段path的注释取消 -->
    <!-- <g transform="translate(292.7 145.85)">
        <path d="M189.3 52.1C189.3 166.7 94.7 333.3 -21.3 333.3C-137.3 333.3 -274.7 166.7 -274.7 52.1C-274.7 -62.5 -137.3 -125 -21.3 -125C94.7 -125 189.3 -62.5 189.3 52.1" fill="#2590eb"></path>
    </g> -->
    <image xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x="0" y="0" width="100%" height="100%" clip-path="url(#blobClip)" preserveAspectRatio="xMidYMid slice"/>
</svg>

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