SVGJS转型链

Question

我真的很努力：

＆＃13;

＆＃13;

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);
      }
    }
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我第一次应用变换和平移时，省略旋转中心。有人可以帮忙吗？

https://jsfiddle.net/xn4xdoky/

预期结果是三角形的形状为正方形。 三角形应围绕附图中的红色标记点旋转，而不是在0,0左右。

Answer 1

要解决此问题，您需要切换旋转和平移。

所以这个：

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

变为：

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