Setting skew transformation center

Question

For operations such as scale, rotate, Raphael.js provides individual methods, through which we can specify the origin of that transformation.

But for skew there is no method like ele.skew(xskewAmount,yskewAmount,xtransfOrigin,ytransfOrigin). So I went for the ele.transform method, like ele.transform("m1,0,.5,1,0,0") to perform a xskew. But I can't specify an origin here, so the element is getting translated incorrectly.

I'm need of following info:

• Is there any method through which i can set the transform origin for skew
• how much distance will the element be translated(unwantedly), if i skew an element. so that i can reposition the element manually.

my code: http://jsfiddle.net/tYqdk/1/

Please note the Skewx button at the bottom of the page.

Answer 1

i know this is old but here goes.

W3C SVG 1.1 - 7 Coordinate Systems, Transformations and Units

• 7.4 Coordinate system transformations
• 7.5 Nested transformations
• 7.6 The ‘transform’ attribute

In section 7.6 they describe the rotation transformation about a point (cx,cy)

Simply - it's this matrix multiplication:

translate(<cx>, <cy>) • rotate(<rotate-angle>) • translate(-<cx>, -<cy>)

To apply this to skewX use:

translate(<cx>, <cy>) • skewX(<skew-angle>) • translate(-<cx>, -<cy>)

• note: these matrix multiplications are described in 7.5 Nested transformations

generic matrix

translate matrix

skewX matrix

var skewer = function(element, angle, x, y) {
  var box, radians, svg, transform;
  // x and y are defined in terms of the elements bounding box
  // (0,0)
  //  --------------
  //  |            |
  //  |            |
  //  --------------
  //             (1,1)
  // it defaults to the center (0.5, 0.5)
  // this can easily be modifed to use absolute coordinates
  if (isNaN(x)) {
    x = 0.5;
  }
  if (isNaN(y)) {
    y = 0.5;
  }
  box = element.getBBox();
  x = x * box.width + box.x;
  y = y * box.height + box.y;
  radians = angle * Math.PI / 180.0;
  svg = document.querySelector('svg');
  transform = svg.createSVGTransform();
  //creates this matrix
  // | 1 0 0 |  => see first 2 rows of
  // | 0 1 0 |     generic matrix above for mapping
  // translate(<cx>, <cy>)
  transform.matrix.e = x;
  transform.matrix.f = y;
  // appending transform will perform matrix multiplications
  element.transform.baseVal.appendItem(transform);
  transform = svg.createSVGTransform();
  // skewX(<skew-angle>)
  transform.matrix.c = Math.tan(radians);
  element.transform.baseVal.appendItem(transform);
  transform = svg.createSVGTransform();
  // translate(-<cx>, -<cy>)
  transform.matrix.e = -x;
  transform.matrix.f = -y;
  element.transform.baseVal.appendItem(transform);
};

i forked your jsfiddle

update - a new fiddle using built-in SVGMatrix methods. I believe it's easier to read and understand