CODEWITHSUNDEEP
svgrotationtransformationsnap.svg
Trevor Orr
Trevor Orr

Reputation: 947

Snap SVG translate element that has rotation

I am trying to move (translate) an object that has been rotated, when I move (translate) the rotated object it loses it's rotation and does move correctly. If the use the same code on an object that is not rotated then the move correctly. What I am doing wrong here?

Here is a fiddle

This code loses the rotation.

var part = s.select("#part_2");
var t = new Snap.Matrix();
t.translate(part.getBBox().x,part.getBBox().y+18);
part.transform(t);

Upvotes: 2

Views: 2004

Answers (1)

Robert Longson
Robert Longson

Reputation: 124089

I'm not sure what order you want the transforms to apply. If you want the squares to move such that down is applied after transforming i.e. down for the rotated matrix is at an angle you'd do this...

    var t = part.transform().localMatrix;
    t.translate(0, 18);
    part.transform(t);

If, however you want down to always be down then you'd do something like this...

    var t = new Snap.Matrix();
    t.translate(0, 18);
    t.add(part.transform().localMatrix);
    part.transform(t);

The trick is to get the existing matrix for the shape and append/prepend the transform you want to it.

Upvotes: 4

Related Questions