Centrar el SVG que ha sido escalado
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.
