Retourner l'image en svg centré à x, y

Question

J'essaie d'inverser une image dans svg. Je suis tombé sur ce thread mais cette solution fonctionne pour les images placées à l'origine (0,0).

Si la largeur de l'image est de 100 et l'image est à (0,0), puis-je faire ce qui suit

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

I essayé de retourner/inverser une image placée en (x, y) mais l'image disparaît. Je ne suis pas clair quant à la traduction que je devrais utiliser.

Le violon est here Si vous décommentez les lignes pour définir les attributs (x, y) de l'image, l'image disparaît.

Je veux comprendre comment la fonction d'échelle fonctionne exactement et ce que je fais mal ici.

Answer 1

Sur demande de @blex et avec modification, il a proposé ... Voici la solution. https://jsfiddle.net/7b25vq82/5/

Vous devez calculer l'emplacement flip et une fois votre faire les calculs, le code initial que vous avez dans le Q fonctionne très bien ...

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)'); 

Bonne chance!