I'm trying to rotate 2 polygons at the same time at 180° in a svg, I'm using the svg.js library right now to do this.

I tried by just rotating it, but of course they rotate in their own center so they don't translate to the other position, so for now I'm trying to create a formula to do this, but I decided to ask here if to see if I missed something, is it possible to merge 2 polygons and then rotate it by their own center?

I added 2 pictures, the first one is what the svg looks like and the second one is what I want to achive.

polygon in original position

How the polygon should look like

also I added the code to create the two polygons in svg.js if you want to try it.

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();