Advertisement


How can I create SVG clipping masks?


Question

I want to take a circle that has a blue border and a picture inside, and clip the picture so it fits inside the circle nicely. I'd prefer to use very small files, perhaps cut down in sprites.

Once I have the clipping mask (sort of like Photoshop), I want to add a hover css animation to it.

2014/01/19
1
3
1/19/2014 9:26:00 PM

Accepted Answer

I have found the answer to my own question.

Here is a tutorial on the subject from coderwall.com. It is amazing and that type of styling and graphical work is just what I am talking about. You can do rich hovers and animations that are super light weight.

Here is their example

The technical parts of what is going on are:

  • With SVGs we can add a clipping path to change the shape of our images.

  • It uses the SVG element is used to group SVG shapes together.

More references:

www.web-expert.it/summer-lab/summer-lab.html

www.tutorials.jenkov.com/svg/g-element.html

www.tutorials.jenkov.com/svg/text-element.html#text-example

tutorials.jenkov.com/svg/clip-path.html

2014/01/19
3
1/19/2014 9:35:00 PM