javascript - How to scale and center an svg path not at the origin

Question

I have two paths, one of which is scaled (see fiddle). The scaling also results in a translation for reasons outlined here: SVG - scale path from center repetitively (pulsating) . I need them centered on each other.

https://jsfiddle.net/bjxvda1w/1/

<svg width="400" height="210">
    <g transform='translate(0 200)'>
        <path d="M 53.3, -96 L37.3 -96 L37.3 -160 L69.3 -160 L69.3 -96 L53.3 -96 Z" fill="red" ></path>
        <path d="M 53.3, -96 L37.3 -96 L37.3 -160 L69.3 -160 L69.3 -96 L53.3 -96 Z" fill="green" opacity=".6" transform="scale(1.3)"></path>
    </g>
</svg>

question from:https://stackoverflow.com/questions/65952222/how-to-scale-and-center-an-svg-path-not-at-the-origin

Answer 1

Waitting for answers