Javascript 如何通过变换或使用旋转值通过数学旋转SVG矩形？

我正在使用收到的数据在SVG中重新创建一个矩形。只要矩形不旋转，我就可以正确绘制矩形。当它旋转时，它位于不正确的位置

矩形值为：

left: 27
top: 30
width: 100
height: 100
localBoundsWidth: 100
localBoundsHeight: 100

这是未旋转的矩形（位置正确）：

.Rectangle\u 1{
位置：绝对位置；
溢出：可见；
宽度：100px；
高度：100px；
左：27px；
顶部：30px；
}
.第1行{
溢出：可见；
位置：绝对位置；
顶部：30.5px；
左：0.5px；
宽度：225px；
高度：1px；
}
.第2行{
溢出：可见；
位置：绝对位置；
顶部：0.5px；
左：27.5px；
宽度：1px；
高度：197px；
}

---

我希望这就是你要问的： 正如我在你的数据中所评论的，大小是140，但是如果你做数学计算，它应该是140.88，如果这对你来说不合适，请告诉我

在下一个演示中，我将计算旋转正方形的顶点在边界框（黑色笔划正方形）上的位置，然后通过将顶点的计算点与多边形连接来绘制旋转正方形（红色笔划正方形）

//初始数据
设hyp=100//斜边
让尺寸=140.88//边界框的大小
设rot=40*Math.PI/180//旋转：40度
设tl={x:6.56，y:9.56}//左上角
设c1=Math.sin（rot）*100//第一个凯瑟图的长度
//设c2=Math.sqrt（hyp*hyp-c1*c1）
//多边形的点：旋转的正方形
设p1={x:tl.x+c1，y:tl.y}
设p2={x:tl.x+size，y:tl.y+c1}
设p3={x:tl.x+size-c1，y:tl.y+size}
设p4={x:tl.x，y:tl.y+size-c1}
//多边形的“点”属性
设点=`${p1.x}，${p1.y}${p2.x}，${p2.y}${p3.x}，${p3.y}${p4.x}，${p4.y}`
poly.setAttributeNS（空，“点”，点）

svg{边框：1px实心#d9d9d9}

那么你是说你只能使用左、上、宽、高、变换和旋转将它移动到你想要的位置？我猜我的意思是你只能改变#矩形(u 1 CSS right？#基思是的，但我必须处理的顶部和左侧值是对象旋转后的x和y。#矩形(u 1必须有x=70.83和y=9.56？#基思我已经更新了问题，使其更清晰。我只是好奇你不必转换：旋转。矩形(u 1而不是#Rectange_1？这真的很有趣，但我认为不是这样。原始矩形的位置为27 x 30。当它旋转40度时，其位置为6.56 x 9.56。旋转后，我不知道原来的顶部和左侧位置（27x30）。如果我可以得到顶部和左侧的位置，那么我可以添加一个

变换：旋转（40度）；变换原点：居中

，且应位于正确位置。我认为这是一种可行的方法。如果有方法取消旋转矩形，它可能会提供这些位置。