[HTML5] Graphics – SVG Transformations

In SVG, transformation is very versatile. You can transform any shapes or even texts using the “transform” attribute.

1. Translation

The “translate()” function moves the shape in x or y direction.

  • translate(dx)
  • translate(dx, dy)
<circle cx="50" cy="50" r="50" fill="Red" />
<circle cx="50" cy="50" r="50" fill="Blue" transform="translate(100)" />
<circle cx="50" cy="50" r="50" fill="Green" transform="translate(0,100)" />
<circle cx="50" cy="50" r="50" fill="Yellow" transform="translate(100,100)" />

 

2. Rotation

The “rotate()” function rotates the shape. It has 3 parameters.

  • angle : clockwise if positive, counter-clock if negative
  • cx, cy : center of location
<rect x="50" y="50" width="100" height="100" fill="Blue" />
<rect x="50" y="50" width="100" height="100" fill="Red" transform="rotate(45, 100, 100)" />

 

3. Scaling

The “scale()” function scales the shape.

  • scale(sx)
  • scale(sx, sy)
<circle cx="50" cy="50" r="20" fill="Red" />
<circle cx="150" cy="50" r="20" fill="Blue" transform="scale(0.5,2)" />
<circle cx="50" cy="150" r="20" fill="Green" transform="scale(2,0.5)" />
<circle cx="150" cy="150" r="20" fill="Yellow" transform="scale(2,2)" />

 

4. Skewing

The “skewX()” and “skewY()” functions are used skew shapes.

  • skewX(angle)
  • skewY(angle)
<rect x="50" y="50" width="100" height="100" fill="Blue" />
<rect x="50" y="50" width="100" height="100" fill="Red" transform="skewX(30)" />
<rect x="50" y="50" width="100" height="100" fill="Green" transform="skewY(30)" />

 

5. Matrix

The matrix is a general transformation.

  •  matrix(a, b, c, d, e, f)

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s