SVGJS transformation chain

Question

I've really tried hard with this:

var vw, vh;
var triangle_base = 100;
var triangle_height = 50;

  vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  registerTrigonom();
  drawHeader('header-animation', vw, vh);

function registerTrigonom() {
  SVG.trigonom = SVG.invent({
    create: function(width, height, c) {
      SVG.G.call(this); // call super constructor
      this.polygon([
        [0, 0],
        [0, width],
        [height, (width / 2)]
      ]).addClass(c)
    },
    inherit: SVG.G,
    construct: {
      trigonom: function(width, height, c) {
        return this.put(new SVG.trigonom(width, height, c));
      }
    }
  });
}

function drawHeader(id, width, height) {
  var draw = SVG(id).size(width, height);

  ax = 4;
  ay = 4;

  for (var y = 0; y < ay; y++) {
    for (var x = 0; x < ax; x++) {
      for (var a = 0; a < 4; a++) {
        var tri = draw.trigonom(triangle_base, triangle_height, 'triangle-beige');
        tri.transform({
          rotation: ((a % 4) * 90),
          cy: (triangle_base / 2),
          cx: triangle_height
        }, true);
        tri.translate((x + 1) * triangle_base, (y + 1) * triangle_base);
      }
    }
  }
}

#header-animation .triangle-beige { fill: #af9600; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<div id="header-animation"></div>

when i first apply a transformation and the translate, the rotation center is ommitted. Could Someone please Help?

https://jsfiddle.net/xn4xdoky/

Expected Outcome is that the triangles got the shape of a Square. Triangles Should be rotated around the red marked point in the attached picture, not around 0,0.

For me its not clear what you are asking. Can you upload an image of the desired result with a few arrows showing direction of rotation? — Fuzzyma, Feb 15 '18 at 11:24
Any chance that this is what you are looking for? -> https://jsfiddle.net/xn4xdoky/3/ — Fuzzyma, Feb 15 '18 at 11:26

score 0 · Answer 1 · answered Jun 14 '18 at 19:09

To solve this problem you need to switch the rotation and translation.

So this:

    tri.transform({
      rotation: ((a % 4) * 90),
      cy: (triangle_base / 2),
      cx: triangle_height
    }, true);
    tri.translate((x + 1) * triangle_base, (y + 1) * triangle_base);

becomes:

    tri.translate((x + 1) * triangle_base, (y + 1) * triangle_base);
    tri.transform({
      rotation: ((a % 4) * 90),
      cy: (triangle_base / 2),
      cx: triangle_height
    }, true);

SVGJS transformation chain

1 Answers1