SVG Clipping Path Examples — Using Paths And Text - Vanseo Design |
| SVG Clipping Path Examples — Using Paths And Text Posted: 17 May 2016 05:30 AM PDT The last couple of weeks, I've been talking about SVG clipping paths and their attributes. So far in the series I've stuck to rectangles as the path in order to keep things simple, however you aren't limited to using rectangles. In fact clipping paths become a lot more interesting when they aren't rectangular or when you clip something more than a simple shape.
Today and next week, I thought I'd walk you through a variety of examples. I'll show you how to use paths and text to clip elements, how to clip groups of elements at the same time, and how to create clipping paths from multiple SVG elements. I'll close next week with an example where I clip an image using a variety of SVG elements. Paths as Clipping PathsLet's start with a couple of examples that use the path element to create the clipping path. In case you missed the previous posts in this series, here's the unclipped shape we're starting with.
Hopefully the code is familiar enough to you. If not I'll point you back to this post covering the basics. Assuming it is familiar, you can see I've created a circle inside the SVG element and filled it with a somewhat muted green. The red outline represents the boundary of the SVG viewport. As you can see the result is a green circle inside a red outline. Now let's add a clipping path. I've defined the clipping path inside the <clipPath> element and I've given the clipPath element an id of path–1. Next I created a clipping path with straight lines using the <path> element. If you need a review of SVG paths, here you go. Finally I added a circle, which references the clipPath id it its clip-path property.
I'm not showing it in the code above, but I also added a path element after the circle with no fill and a blue outline so you could see the boundaries of the clipping path. Here's the result. The circle is visible wherever it's inside the path and it's hidden or clipped wherever it falls outside the boundaries of the path. This next example is similar to the first. The only difference is that I used curves instead of straight lines to create the clipping path. Here's another post if you need a reminder for working with curved paths.
Once again I created an additional path not shown in the code so you can see the outline of the clipping path. Perhaps neither of these two examples is the most exciting use of clipping paths you'll ever see, but I hope you'll agree they're a little more interesting than a simple rectangle. Not that there's anything wrong with rectangles as we'll see in the next example. Clipping SVG GroupsYou aren't limited to clipping a single SVG shape like I've been doing with a circle the last few weeks. You can group SVG elements together and clip the entire group or clip only some of the elements in the group. Here I added a triangle to the circle from the previous example and wrapped both inside a group element. I'll show the code momentarily, but here's what the group looks like unclipped. I created the triangle using the polygon element with three points specified. I wrapped both the polygon and the circle with the group element, <g>. Since the focus of this example is the group of elements (circle and triangle) I went with a simple rectangle as the clipping path.
Notice that I referenced the clipping path and applied the clip-path property to the group and not to either or both of the elements inside the group. Had I applied the clip-path property to one of the elements instead of the group, only that element would be clipped. Here's the same example with the clip-path moved to the polygon.
You can see the triangle (the polygon) is clipped, but the circle isn't. Text as a Clipping PathSVG also allows text to be used as a clipping path. Here I've kept the group that contains the circle and triangle, but changed the clipPath to a text element.
Here's the result and you can see the text allows part of the circle and part of the triangle to show through. The second 'p' in Clipping reveals a little of both shapes. You can style SVG text in different ways so changing something like the font family of the clipping path is as simple as changing the value of the font-family property inside the text element. Alternatively you could give the <text> element a class and then use CSS to style the class and change the font-family.
The only difference between this example and the previous one is the font-family which I changed from Helvetica to Georgia. Closing ThoughtsAs I've hopefully shown, clipping paths can be more than simple rectangles. Today I presented straight line and curved paths as well as text as the clipping path. I also showed how to clip multiple elements inside a group. Next week I want to share a few more examples. We'll look at using multiple SVG elements to create a more complex path and then we'll use that multi-element path to clip an image. Download a free sample from my book Design Fundamentals. Join me as I share my creative process and journey as a writer.      This posting includes an audio/video/photo media file: Download Now |
| You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States | |