CODEWITHSUNDEEP
htmlsvg
Simonsoft177
Simonsoft177

Reputation: 175

SVG clippath with image and fill

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>

Upvotes: 1

Views: 1039

Answers (1)

enxaneta
enxaneta

Reputation: 33034

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>

Upvotes: 2

Related Questions