{"id":255253,"date":"2017-06-07T06:20:55","date_gmt":"2017-06-07T13:20:55","guid":{"rendered":"http:\/\/css-tricks.com\/?p=255253"},"modified":"2017-06-07T17:22:06","modified_gmt":"2017-06-08T00:22:06","slug":"masking-vs-clipping-use","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/masking-vs-clipping-use\/","title":{"rendered":"Masking vs. Clipping: When to Use Each"},"content":{"rendered":"
I was recently doing some client work where I used both <\/p>\n Both clipping and masking obscure areas where elements in an SVG or HTML element can be visually applied. You use a bit of SVG designated as a See the Pen d2a9315e310901a3d43ba3bdf8413c65<\/a> by Sarah Drasner (@sdras<\/a>) on CodePen<\/a>.<\/p>\n Though no demo of these techniques will rival Yoksel<\/a>‘s version, which is comprehensive not just to SVG but to CSS versions of clipping and masking as well:<\/p>\n See the Pen CSS and SVG Masks<\/a> by yoksel (@yoksel<\/a>) on CodePen<\/a>.<\/p>\n These techniques are so useful because we can show and hide bits of content, which we can use for unique layouts, realism in animation, and performant alternatives to height transitions. <\/p>\n Think about You can still, however, animate these visual elements, change their attributes, and apply transforms to them, these will still be honored. Remember that when you animate them you need to target the elements inside the Check out the Wall-e demo below. Do you see how the arms are being obscured as they reach out and then tuck back into the body? In order to realistically hide and show that arm, we will need to obscure it as it moves. In this case, we made a See the Pen Vue-controlled Wall-E<\/a> by Sarah Drasner (@sdras<\/a>) on CodePen<\/a>.<\/p>\n<clipPath><\/code>s and
<mask><\/code>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we’ll go over some of these details so that you can get productive as soon as possible.<\/p>\n
What is clipping and masking and why should we care about it?<\/h3>\n
<clipPath><\/code> or
<mask><\/code> by wrapping the element and applying an id, like so:<\/p>\n
Clipping<\/h3>\n
<clipPath><\/code> in SVG (or
clip-path<\/code> in CSS) as a way to cut a shape out of another shape. There’s no concept of opacity, or alpha channel, to gray area here. Parts of the element with a clipping path applied are literally visible<\/em> or not visible<\/em>. Clipping just uses the geometry of the shape. Because of this, certain visual elements won’t be applied.<\/strong> This includes, but is not limited to: stroke and stroke styles, gradients, and fill colors. <\/p>\n
<clipPath><\/code>. Another thing to keep in mind is that the pieces that are clipped away won’t accept pointer events, so events can only be captured on the parts that you can visually see.<\/p>\n
clipPath<\/code> out of the elbow curve and clipped pieces of the arm as it extended.<\/p>\n