Javascript 如何将旋转应用于图形元素并获取新的路径数据？

如何将路径旋转应用于图形元素（如矩形或路径）

例如，将旋转应用于路径：

---

我将使用一组点来绘制路径。对于旋转，我将旋转点并绘制旋转的形状。请阅读我代码中的注释。我希望这就是你要问的

const SVG_NS=SVG.namespaceURI； //轮换 设角度=Math.PI/4； //用于旋转初始矩形的点 让我们来谈谈[ {x:100，y:0}， {x:100+20，y:0}， {x:100+20，y:0+20}， {x:100，y:0+20} ]; //计算旋转点 设rotatedRect=[]； theRect.forEachp=>{ rotatedRect.pushrotatePointp，角度； }; 拉直； DrawRectoratedRect； //用于绘制矩形的函数。为此，我使用点数组 功能牵引{ 设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}，路径，svg； } //用于围绕原点{0,0}旋转点的函数 函数旋转点，旋转点{ 设cos=Math.cosrot； 让sin=Math.sinrot； 返回{ x:p.x*cos-p.y*sin， y:p.x*sin+p.y*cos }; } //用于绘制svg元素的函数 函数drawSVGelmto、标记、父级{ 让elmt=document.createElementNSSVG_NS，标记； 让名字进入o{ 如果o.hasOwnPropertyname{ elmt.setAttributesNull，name，o[name]； } } parent.appendChildelmt； 返回elmt； } svg{边框：1px实心；最大宽度：90vh；}

---

这里需要大量的数学知识，基本上是重新创建SVG渲染堆栈的一部分。使用无头浏览器访问特定于浏览器的内容（如SVG渲染）可能更简单；这里有一个例子