La imagen al inicio tiene un width="50" height="50" x="75" y="50" . Cuando agregamos el transform="scale(2)" pasa a tener los siguientes valores width="100" height="100" x="150" y="100" por eso se posiciona en la esquina inferior derecha. Ahora, una forma para volver a centrarla es modificar sus coordenadas ¿cómo? La imagen mide 100x100, el viewBox 200x150. Hay que restar el ancho del elemento con el ancho del contenedor padre y el alto del elemento padre con el alto de la imagen para que tengamos el espacio disponible que existe entre ellos. 200 - 100 = 100 150 - 100 = 50 Bien. Ya tenemos la diferencia, ahora hay que dividir entre dos (porque queremos tengan el mismo espacio de diferencia) 100 / 2 = 50 50 / 2 = 25 Una vez terminado, hay que volver a dividir entre dos (porque tenemos una escala en dos) 50 / 2 = 25 25/ 2 = 12.5 ¡Listo! tenemos las coordenadas nuevas, x= 25, y=12.5
Espero me haya dado a entender y ha alguien le sirva.