How can I flip an rotated svg element using javascript SVGMatrix - svg

Question

I have a svg element, let's say a group, that has applied matrix rotation to it. I want to use svgmatrix api to flip it regarding root / screen axis.
Solution found as #enxaneta suggested, is to wrap element in a pristine group and apply the flipping to it, offloading the work math to the engine / browser. This way any transformations will be preserved
export const mirror = ($el, k) => {
if (!$el) return
// flip horizontall or vertical
if (k !== 1 && k !== -1) return false
// create a group from element
const $g = newtag('g')
const $father = $el.parentElement || $el.ownerSVGElement
const $next = $el?.nextElementSibling
$next
? $father.insertBefore($g, $next)
: $father.appendChild($g)
$g.appendChild($el)
// get matrix of group
let xg = m($g)
let bb = $g.getBBox()
let x = bb.x+bb.width/2
let y = bb.y+bb.height/2
if (k === -1) {
xg = xg.flipY().translate(0, -2*y)
} else if (k === 1) {
xg = xg.flipX().translate(-2*x, 0)
}
// apply transformations to the group
setm($g, xg)
// preserve transformations applied to group wrapped element
// so when will be extracted from group it will have them
const xel = m2e($el, $father)
$father.insertBefore($el, $g)
setm($el, xel)
$g.remove()
}
const m = e => e.transform.baseVal.consolidate()?.matrix || e.ownerSVGElement?.createSVGMatrix() || e.createSVGMatrix()
const setm = (e, m) =>e.transform.baseVal.initialize(e.ownerSVGElement?.createSVGTransformFromMatrix(m))
const newtag = (n, v=null) => {
n = document.createElementNS(xmlns, n);
n.setAttributeNS(null, 'id', '_'+rnd())
if (!v) return n
attr(n, v)
return n
}
const attr = (n, v=null) => {
for (let p in v){
n.setAttributeNS(null, p.replace(/[A-Z]/g, (m, p, o, s) => "-" + m.toLowerCase()), v[p])
}
}
const m2e = (a,e) => {
if (!e) e = a.ownerSVGElement
return e.getScreenCTM().inverse().multiply(a.getScreenCTM())
}