Как применить вращение к графическим элементам и получить новые данные пути?

Question

Как применить вращение пути к графическим элементам, таким как прямоугольник или путь?

Например, применение поворота к пути:

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <rect x="100" y="0" width="20" height="20" fill="red" transform="rotate(45)"/>
</svg>

ВАЖНОЕ ПРИМЕЧАНИЕ:
У меня не работает браузер.Я помню, как видел решения, которые используют браузер или холст для расчетов.

У меня есть только разметка.Для пути у меня есть данные пути, для прямоугольника - положение, ширина и высота, а линия - данные x1 y1 и x2 y2.

ОБНОВЛЕНИЕ:
Важно знать источник преобразования.Это будет повернуто от центра элемента.

Answer 1

Я бы использовал массив точек, чтобы нарисовать путь. Для поворота я бы повернул точки и нарисовал повернутую форму. Пожалуйста, прочитайте комментарии в моем коде. Я надеюсь, что это то, что вы спрашивали.

const SVG_NS = svg.namespaceURI;
// the rotation
let angle = Math.PI/4;
// the points used to rotate the initial rect
let theRect = [
  { x: 100, y: 0 },
  { x: 100 + 20, y: 0 },
  { x: 100 + 20, y: 0 + 20 },
  { x: 100, y: 0 + 20 }
];

// calculating the rotated points 
let rotatedRect = [];
theRect.forEach(p => {
  rotatedRect.push(rotatePoint(p, angle));
});


drawRect(theRect);
drawRect(rotatedRect);


// a function to draw the rect. For this I'm using the points array
function drawRect(ry) {
  let d = `M${ry[0].x},${ry[0].y}L${ry[1].x},${ry[1].y} ${ry[2].x},${ry[2].y} ${
  ry[3].x
  },${ry[3].y}`;
  drawSVGelmt({ d: d }, "path", svg);
}


// a function used to rotate a point around the origin {0,0}
function rotatePoint(p, rot) {
  let cos = Math.cos(rot);
  let sin = Math.sin(rot);
  return {
    x: p.x * cos - p.y * sin,
    y: p.x * sin + p.y * cos
  };
}


// a function to draw an svg element
function drawSVGelmt(o, tag, parent) {
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

svg{border:1px solid; max-width:90vh;}

<svg id="svg" viewbox="0 0 200 200">
  <rect x="100" y="0" width="20" height="20" fill="red" transform="rotate(45)"/>
</svg>