可以同时旋转 2 个 SVG 多边形吗？

Question

我正在尝试在 svg 中同时旋转 2 个多边形 180°，我现在正在使用 svg.js 库来执行此操作。

我试过只是旋转它，但当然它们在自己的中心旋转，所以它们不会平移到另一个位置，所以现在我正在尝试创建一个公式来做到这一点，但我决定在这里问一下我是否遗漏了一些东西，是否可以合并2个多边形然后按它们自己的中心旋转它？

我添加了2张图片，第一张是svg的样子，第二张是我想要实现的。

polygon in original position

How the polygon should look like

如果您想尝试，我还在 svg.js 中添加了创建两个多边形的代码。

const draw = svg.SVG().addTo('body').size(300, 300);

let arrayPlanoAux = new svg.PointArray([[0, 0], [-1.7100368367682677, 23.146833626087755], [-17.803859973151702, 22.60143719892949], [-16.282387804763857, -0.5637496160343289], [0, 0]]);

let arrayBaseBuilding = new svg.PointArray([[-15.29139890637604, 12.091529326340595], [-10.53174232201431, 1.8880920578779659], [-3.615804392530878, 5.114223211431884], [-8.375460976892608, 15.317660479894514], [-8.375460976892608, 15.317660479894514]]);

const boundingBoxBuilding = [-15.29139890637604, 1.8880920578779659, -3.615804392530878, 15.317660479894514];

const basePolygon = draw.polygon(arrayPlanoAux);

const planoAuxBoundingBox = basePolygon.bbox();
basePolygon.fill(yellow).move(23, 15);
const secondAuxPlaneBbox = basePolygon.bbox();
let baseBuildingPolygon = draw.polygon(arrayBaseBuilding).fill(orange).opacity(0.7)
let basePolygonBoundingBox = baseBuildingPolygon.bbox();
baseBuildingPolygon.move(math.abs(planoAuxBoundingBox.x-boundingBoxBuilding[0])+secondAuxPlaneBbox.x, math.abs(planoAuxBoundingBox.y-boundingBoxBuilding[1])+secondAuxPlaneBbox.y);
basePolygonBoundingBox = baseBuildingPolygon.bbox();

draw.svg();

Answer 1

要么将两个多边形包裹在一个组中并旋转该组，要么围绕它们的公共中心旋转两个多边形（使用 rotate(deg, cx, cy)）。你需要先计算一下

可以同时旋转 2 个 SVG 多边形吗？

it is possible to rotate 2 SVG polygons at the same time?

javascript

svg

svg.js