⚓ transform()

Creates transformations of the elements in a collection, such as rotating, scaling or translating them. transform() manipulates the elements’ transform attribute. Refer to MDN’s page on the transform attribute for the values this method accepts.

See also transformCss(), which works in a similar way, using the elements’ CSS transform property.

Get a key-value object of the element’s transforms.

var elem = Pablo('<rect transform="rotate(45) scale(2)"/>');
alert(elem.transform());

⚓ transform(true)

As above, but returns an ordered array of transform objects.

var elem = Pablo('<rect transform="rotate(45) scale(2)"/>');
alert(elem.transform(true));

⚓ transform(name)

Get an array of values for the named transform.

var elem = Pablo('<rect transform="rotate(45)"/>');
alert(elem.transform('rotate'));

⚓ transform(name, value, [value1], [value2])

Set a named transform in the transform attribute of each element in the collection and return the collection. Any number of values can be used, according to needs of the transformation.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform('translate', 180, 30)
    .transform('rotate', 45);

If multiple transforms are already present on the element, then only the named transform will be updated.

⚓ transform(name, values)

As above, but with values given as an array.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform('translate', [180, 30])
    .transform('rotate', [45]);

⚓ Value functions

transform() also accepts the value as a function, as with .attr() and other methods:

var svg = Pablo(demoElement).svg({height:210})
    squares = svg.rect({
        x:90, y:110,
        width:80, height:80,
        fill:'rgba(120,30,0,0.3)',
        stroke:'rgba(30,60,90,0.7)'
    }).duplicate(11);

squares.transform('rotate', function(el, i){
    // Rotate 30 degrees for each element
    // using a rotation origin of (110, 105)
    return [i * 30, 110, 105];
});

⚓ transform(transforms)

Set one or more transforms as either an array of transforms or a key-value map of transforms.

To ensure the expected results, use arrays to set multiple transforms. The order of transforms on an element is important, e.g. a scale after a translate will give different results than a translate after a scale.

As an array of transforms:

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform([
    {translate: [180, 30]},
    {rotate: 45}
]);

As a key-value map:

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform({
    translate: [180, 30],
    rotate: 45
});

⚓ transform(stringValue)

Set one or more transforms as a string, representing the transform attribute’s value.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform('translate(180, 30) rotate(45)');

⚓ transform(null)

Remove all transforms on the element.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform('translate', 180, 30)
    .transform('rotate', 45);

rect.transform(null);

⚓ transform(name, null)

Remove the named transform on the element.

var svg = Pablo(demoElement).svg({height:175}),
    rect = svg.rect({
        width: 100,
        height: 100,
        fill: 'red'
    });

rect.transform('translate', 180, 30)
    .transform('rotate', 45);

rect.transform('rotate', null);

Painting is just another way of keeping a diary.

Pablo Picasso