3

Anyone could guide me with how to do CSS Image Clip path with SVG unique shapes? Some people were suggesting to a third-party plugin like SVG Injector and all. Anyone could help me how to achieve this task that will work in all the browsers?

I have given one example image to make it better understanding. Kindly check the below image.

enter image description here

http://ktdev.khaleejtimes.ae/shape.jpg

Thanks & Appreciated.

John smith FN
  • 101
  • 1
  • 1
  • 8
  • 1
    what did you try? What didn't work? – cloned May 13 '19 at 09:50
  • Hi, I am new to this SVG & Css Combination work. I am looking to learn how to do this one. Below is the one what i did after lots of research. But nowhere couldn't able to find how to use uniqe shapes and do clip path:- Any Examples or tutorials also would be really appreciated. http://ktdev.khaleejtimes.ae/bg/bg-shapenw1.html – John smith FN May 13 '19 at 09:54
  • https://css-tricks.com/using-css-clip-path-create-interactive-effects/ here you can read on how to create a mask and how to use it to create different effects. – cloned May 13 '19 at 10:37

1 Answers1

14

First you need to draw a path with the desired shape. Next you use the shape to clip the image using <clipPath>

svg{border:1px solid}
<svg viewBox="0 0 643 525">
  
  <defs>
    <clipPath id="shape">
      <path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
 c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
 s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
 s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
    </clipPath>
    
  </defs>
<image width="643" height="643" clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>

</svg>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Hi enxaneta, Thank you very much. This is exactly what i am looking for. Just a quick question. This will be compatible with all the browsers including IE? – John smith FN May 14 '19 at 07:48
  • Hi enxaneta, This is showing up only in chrome but not showing up on other browsers like FireFox (66.0.5), Safari (5.1.7) and IE (11.096). I can just see white color blank screen when i checked "Code Snippet" preview which you have shared above. So could you give me any solution for this please? – John smith FN May 14 '19 at 09:51
  • Thank you for commenting I think now it should work. Apparently the `` needed both a width and a height. Checked: Chrome, Firefox, Safari, Edge, IE – enxaneta May 14 '19 at 10:34
  • Thanks, dear. It's perfect now! :) – John smith FN May 14 '19 at 10:49
  • how to change the image position within the clip-path? if I want to show lower part of dog and not the face with same image, how to that? – Atul Rajput Jul 16 '20 at 13:37
  • 1
    @AtulRajput An image can also take an x and an y attributes. The default value for x and y attributes is 0. In the example above I didn't used x and y which mean that x="0" and y="0". If you need to move the image so that you can see the lower part of the dog you will need to use a negative y attribute, for example y="-150". – enxaneta Jul 16 '20 at 14:33
  • i tried this but it is not showing as a background image of a div. any idea? – Sam Dec 15 '22 at 21:10
  • Please feel free to ask a question with with what you have in mind. Do not forget to add the code that do not work and maybe an image with the expected result – enxaneta Dec 15 '22 at 21:15