From the course: SVG: Clipping, Masking, and Filters
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
The clipPath coordinate system
From the course: SVG: Clipping, Masking, and Filters
The clipPath coordinate system
- [Instructor] In this course, we're looking at the clip path, mask, and filter elements in SVG because they have a lot of similarities. And one of those is how the coordinate system of each element behaves and changes depending on your settings. In the SVG filters chapter later on, I'll take a deep dive into exactly how this works and what's covered there also applies to both clip path and mask elements. For now, let's do a quick rundown of how the coordinate system in clip path works because it has some unique properties. Let's start with an example. If I were to add a new path inside my clip path, I simply create, let's say, a new rectangle. So I'll set up a rect, I'll set the X and Y values to 10, and set the width and height values to 20. Having worked with SVGs before, you'll know what's gonna happen here. We'll end up with a little square up here in the left-hand corner, 10 points from the top and 10 points from the left. That's exactly 20 across on both directions. So save the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.