CODEWITHSUNDEEP
htmlsvg
martin36
martin36

Reputation: 2363

SVG clipPath clipping wrong part of image

I am trying to create a SVG circle with an image inside of it. The image is supposed to be inside of the SVG circle with a radius that is slightly below the radius of the outer circle. To clip the image I am using the <clipPath> element on the <image> element. But is won't clip the right path. Here is a Codepen to give an example:

https://codepen.io/Martin36/pen/BdpMbX

As you can see in the example the <clipPath> clips the upper left corner of the image even though the clipping <circle> is placed directly above the <image> element. Here is the code:

<svg width="900" height="300" >
  <g class="hotel" transform="translate(150,150)">
    <circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;" class=""></circle>
    <clipPath id="clipCircle">
      <circle r="100"></circle>   
    </clipPath>
    <image xmlns:xlink="http://www.w3.org/1999/xlink"
           xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg" 
           clip-path="url(#clipCircle)" 
           width="250" height="250" 
           transform="translate(-125,-125)">         
    </image>
  </g>
</svg>

Does anyone know why this happens and how to fix it?

Upvotes: 0

Views: 239

Answers (1)

martin36
martin36

Reputation: 2363

I solved the problem by changing the cx and cy properties of the <circle> element inside the <clipPath> tag to the widthof the image divided by two. The codepen is updated with the correct code. But I will post it here also:

<svg width="900" height="300" >
  <g class="hotel" transform="translate(150,150)">
    <circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;"></circle>
    <clipPath id="clipCircle">
      <circle r="100" cx="125" cy="125"> </circle>   
    </clipPath>
    <image xmlns:xlink="http://www.w3.org/1999/xlink"
           xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg" 
           clip-path="url(#clipCircle)" 
           width="350" height="250" 
           transform="translate(-125,-125)">         
    </image>
  </g>
</svg>

Upvotes: 0

Related Questions