Flip Image In Svg Centered At X,y

I am trying to invert an image in svg. I came across this thread but this solution works for images placed at the origin (0,0). If the width of the image is 100 and the image is a

Solution 1:

On Request from @blex and with modification he proposed... Here is the solution. https://jsfiddle.net/7b25vq82/5/

You need to calculate the flip location and once your make the calculations, initial code you have in the Q works fine...

var img = document.getElementById("flip");
var xCord = 100;
var yCord = 100;
var imageSize = 100;
var flipLocation = (xCord*2 + imageSize);

img.setAttributeNS(null, 'x', xCord);
img.setAttributeNS(null, 'y', yCord);

img.setAttributeNS(null, 'transform', 'translate('+flipLocation+',0) scale(-1,1)');

Good Luck!