CODEWITHSUNDEEP
htmlimageblob
Simonsoft177
Simonsoft177

Reputation: 175

Inserting image inside SVG blob

What I am trying to achieve is to place image inside the SVG blob. The problem is that the image is not inside the blob but 'sticks out' over the blob's borders. My goal is to not show the image outside the blob. Any help would be very appreciated.

  <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">
               <rect x="0" y="0" width="500" height="500" fill="#fff">                 
               </rect>
               <g transform="translate(292.7 145.85)">
                 <path id="svg1" 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(#svg1)" preserveAspectRatio="xMidYMid slice"/>
              </svg>

Upvotes: 0

Views: 2061

Answers (1)

Alexei Vladimirovich Kashenko
Alexei Vladimirovich Kashenko

Reputation: 169

I think you need to use <clipPath>

Is something like this you are looking for?

Here is a snippet example you could apply to your code

body {
  background: #EDE29F;
}

svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<svg width="500" height="500" viewBox="0 0 500 500">

   <clipPath id="clip-path">
 <path d="M22.154,108.389 L258.274,13.5 L449.156,151.421 L487.774,429.469 L211.933,472.5 L30.981,366.577 L22.154,108.389 z">
   </clipPath>
<!-- xlink:href for modern browsers, src for IE8- -->
<image clip-path="url(#clip-path)" xlink:href="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg"  src="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg" alt="Image" height="500" width="500" class="svg__image">       
  
</svg>

Upvotes: 1

Related Questions