1. Technology

How to Use the Transform Attribute in SVG

SVG Transform Attribute

By

Learning how to use the transform attribute in SVG is the key to moving images. Transform is the attribute that kick starts altering the position or size of an image through animation. By providing 'transform' in the information code for a shape, you begin a process of change and create movement.

About Transformations

Transformations are part of the animation possibilities in SVG. Unlike more traditional XML coding, SVG calls a function to perform transformations. The functions are predefined in the SVG DTD. When the parser sees the attribute 'transform' it knows to check the DTD for a definition.

Transform Syntax

Transform sits inside the descriptive attributes for your shape. For example, if you create a rectangle, you provide specific attributes to define the style. If your rectangle needs to transform, you use this feature as part of the description.

<rect x="50" y="50" height="110" width="110" style="stroke: #000000; fill: #cccccff" transform=

Transform is a separate entity in the code. For instances, this sample has incorrect syntax.

<rect x="50" y="50" height="110" width="110" style="stroke: #000000; fill: #cccccff transform=

In this code, the style attribute is not closed. This means the parser will include transform in style. Before adding the transform attribute, you should finish coding the style description and then close it with a quote. This will separate the transform attribute from the basic design specification.

<rect x="50" y="50" height="110" width="110" style="stroke: #000000; fill: #cccccff" transform=

What Comes After Transform?

Once you enter the transform attribute, the next step is to specify the function. Transform is a function call request. After the parser identifies that you are calling a function, it must know which one to process.

<rect x="50" y="50" height="110" width="110" style="stroke: #000000; fill: #cccccff" transform="translate(30)" />

This code creates the transform function call and lists translate as the proper action.

©2014 About.com. All rights reserved.