SVGBasics

Rotating Shapes with a Transform in SVG

Since these shapes are pretty straightforward, I've added a transform to the next one to make things interesting. In SVG a transform refers to the geometric kind; a translation (movement), rotation, scale, or skew (shear). I'll just explain the transform I've used for now and maybe I can expound on it more at a later date. The transform used here is described where the source reads transform="rotate(-45 100 100)". This means that the rectangle should be rotated 45 degrees counter-clockwise with the center of rotation at (100,100). Other valid transformations are matrix, translate, scale, skewX, and skewY. You can read more about these in the specification if you're interested.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox = "0 0 200 200" version = "1.1">
    <rect x = "25" y = "50" width = "150" height = "100" fill = "tomato" stroke = "lightgreen" stroke-width = "2" transform = "rotate(-45 100 100)"/>
</svg>
©2004 Late Night PC Service | About Us | Site Map | Contact Us