SVG 带有图像和填充的剪辑路径

Question

My goal is to fill the background of the SVG with the #2590eb color. I don't know why it is not working. The picture is transparent png. Tried resizing the picture to smaller width but it doesn't work. Any help would be much appreciated.

 <svg width="500" height="500" viewBox="0 0 500 500"> <clipPath id="clip-path" 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" > </clipPath> <:-- xlink,href for modern browsers: src for IE8- --> <image clip-path="url(#clip-path)" xlink:href="https.//www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background:png" x='50' src="https.//www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" alt="Image" height="500" width="500" class="svgImg"> </svg>

Answer 1

Since the filled path is used inside the clipPath you can't see it. In the next example I'm using the path with use before the image element.

Also I've eliminated the transforms you have by changing the viewBox of the svg element.

 <svg width="500" height="500" viewBox="-292.7 -145.85 500 500"> <clipPath id="clip-path"> <path id="thePath" 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" /> </clipPath> <use xlink:href="#thePath" /> <image clip-path="url(#clip-path)" xlink:href="https://www.pngplay.com/wp-content/uploads/7/Happy-Person-Transparent-Background.png" x='-300' y="-150" height="500" width="500" class="svgImg" /> </svg>