我正在使用收到的数据在SVG中重新创建一个矩形。只要不旋转矩形，就可以正确绘制矩形。旋转时，它的位置不正确。
矩形值是：
left: 27
top: 30
width: 100
height: 100
localBoundsWidth: 100
localBoundsHeight: 100
这是未旋转的矩形（正确定位）：
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 100px;
height: 100px;
left: 27px;
top: 30px;
}
.Line_1 {
overflow: visible;
position: absolute;
top: 30.5px;
left: 0.5px;
width: 225px;
height: 1px;
}
.Line_2 {
overflow: visible;
position: absolute;
top: 0.5px;
left: 27.5px;
width: 1px;
height: 197px;
}<div>
<svg class="Rectangle_1">
<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
</rect>
</svg>
<svg class="Line_1">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
</path>
</svg>
<svg class="Line_2">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
</path>
</svg>
</div>
这是它的外观（期望的结果）。我已经手动调整了位置：
#Rectangle_1 {
transform: matrix(0.7660,0.6427,-0.6427,0.7660,64.28,0.5);
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 140.883px;
height: 140.883px;
left: 6.558px;
top: 9.558px;
}
.Line_1 {
overflow: visible;
position: absolute;
top: 30.5px;
left: 0.5px;
width: 225px;
height: 1px;
}
.Line_2 {
overflow: visible;
position: absolute;
top: 0.5px;
left: 27.5px;
width: 1px;
height: 197px;
}
.Line_5 {
overflow: visible;
position: absolute;
top: 0.5px;
left: 70.5px;
width: 1px;
height: 9px;
}
.Line_6 {
overflow: visible;
position: absolute;
top: 86.5px;
left: 0.5px;
width: 6px;
height: 1px;
}<div>
<svg class="Rectangle_1">
<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
</rect>
</svg>
<svg class="Line_1">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
</path>
</svg>
<svg class="Line_2">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
</path>
</svg>
<svg class="Line_5">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_5" d="M 0 9 L 0 0">
</path>
</svg>
<svg class="Line_6">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_6" d="M 6 0 L 0 0">
</path>
</svg>
</div>
旋转矩形后，我无法将其绘制在正确的位置，因为在矩形围绕其中心旋转后，我收到的值为绘制边界。
因此，原始的未旋转矩形值为：
left: 27
top: 30
width: 100
height: 100
localBoundsWidth: 100
localBoundsHeight: 100
旋转40度时，值为：
left: 6.56
top: 9.56
width: 140
height: 140
transform: matrix(0.766,0.6428,-0.6428,0.766,70.8372,9.5584)
rotation: 40
localBoundsWidth: 100
localBoundsHeight: 100
如果重要，则其父坐标空间的左上角是：
x: 70.83
y: 9.56
当我尝试使用以上信息（旋转值）创建旋转矩形时，该矩形位于错误的位置。
#Rectangle_1 {
transform: rotate(40deg);
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 100px;
height: 100px;
left: 6.56px;
top: 9.56px;
}
.Line_1 {
overflow: visible;
position: absolute;
top: 30.5px;
left: 0.5px;
width: 225px;
height: 1px;
}
.Line_2 {
overflow: visible;
position: absolute;
top: 0.5px;
left: 27.5px;
width: 1px;
height: 197px;
}<div>
<svg class="Rectangle_1">
<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
</rect>
</svg>
<svg class="Line_1">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
</path>
</svg>
<svg class="Line_2">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
</path>
</svg>
</div>
当我尝试使用矩阵值时，它也在错误的位置：
#Rectangle_1 {
transform: matrix(0.766,0.6428,-0.6428,0.766,70.8372,9.5584);
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 100px;
height: 100px;
left: 6.56px;
top: 9.56px;
}
.Line_1 {
overflow: visible;
position: absolute;
top: 30.5px;
left: 0.5px;
width: 225px;
height: 1px;
}
.Line_2 {
overflow: visible;
position: absolute;
top: 0.5px;
left: 27.5px;
width: 1px;
height: 197px;
}
.Line_5 {
overflow: visible;
position: absolute;
top: 0.5px;
left: 70.5px;
width: 1px;
height: 9px;
}
.Line_6 {
overflow: visible;
position: absolute;
top: 86.5px;
left: 0.5px;
width: 6px;
height: 1px;
}<div>
<svg class="Rectangle_1">
<rect fill="rgba(255,93,93,1)" id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="100" height="100">
</rect>
</svg>
<svg class="Line_1">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 225 0">
</path>
</svg>
<svg class="Line_2">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 0 0 L 0 197">
</path>
</svg>
<svg class="Line_5">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_5" d="M 0 9 L 0 0">
</path>
</svg>
<svg class="Line_6">
<path stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_6" d="M 6 0 L 0 0">
</path>
</svg>
</div>
我只有以下信息可以正确旋转矩形（旋转值）：
left: 6.56
top: 9.56
width: 140
height: 140
transform: matrix(0.766,0.6428,-0.6428,0.766,70.8372,9.5584)
rotation: 40
localBoundsWidth: 100
localBoundsHeight: 100
父级坐标空间的左上角是：
x: 70.83
y: 9.56
是否可以仅使用上述信息（旋转值）将矩形放置在正确的位置？
或者是否可以仅使用上面的信息来旋转矩形以获得原始的顶部和左侧值？
仅供参考，矩形已绕其中心点旋转不是左上方。
答案 0 :(得分：1)
我希望这是您要问的： 正如我在您的数据中评论的那样，大小为140，但是如果您进行数学计算，则应该为140.88。如果这样不合适，请告诉我。
在下一个演示中，我将计算旋转方块的顶点在边界框（黑色描边的正方形）上的位置，然后通过将顶点的计算点与相连，绘制旋转方块（描边的红色正方形）多边形。
// initial data
let hyp = 100;//hypotenuse
let size = 140.88;//the size of the bounding box
let rot = 40*Math.PI/180;//rotation: 40 degs
let tl = {x:6.56,y:9.56};//the top left point
let c1 = Math.sin(rot) * 100;//the length of the first cathetus
//let c2 = Math.sqrt(hyp * hyp - c1*c1)
//the points for the polygon: a rotated square
let p1 = {x:tl.x + c1,y:tl.y}
let p2 = {x:tl.x + size,y:tl.y+c1}
let p3 = {x:tl.x + size - c1,y:tl.y + size}
let p4 = {x:tl.x,y:tl.y + size - c1}
// the points attribute for the polygon
let points =`${p1.x},${p1.y} ${p2.x},${p2.y} ${p3.x},${p3.y} ${p4.x},${p4.y}`
poly.setAttributeNS(null,"points",points)svg{border:1px solid #d9d9d9}<svg viewBox="0 0 154 160" width="300">
<!--the rect is drawing the bounding box for the rotated square-->
<rect x="6.56" y="9.56" width="140.88" height="140.88" fill="none" stroke="black" />
<polygon id="poly" stroke="red" fill="none" />
</svg>