From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Rotate SVG shapes

Rotate SVG shapes - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Rotate SVG shapes

“

- [Instructor] Going through all of these different shapes you've probably noticed there's an obvious piece of the puzzle that's missing. How do we rotate a shape? Say you have a rectangle but you want it to be displayed at a 45 degree angle, the rect element gives you the rectangle but it's square with the view box. Same with pretty much all the other shapes, maybe with the exception of line because line is just a line and you can place it anywhere you want. Rotating a shape falls under the domain of the transform attribute along side translating, scaling, and skewing. The transform attribute applies to an element and it's children. So it can be used on an SVG shape like a rectangle, or a g element, or a symbol, etc. In this movie we'll look at how to use transform to rotate a simple rectangle. In the exercise files for this movie I've set up an SVG with a rectangle aligned to X and Y 20. To make it clear where the anchor point for the rectangle is as we start off. I've highlighted…

Contents