问题
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 at (0,0), then I do the following
img.setAttributeNS(null, 'transform', 'translate(100,0) scale(-1,1)');
I tried to flip/invert an image placed at (x,y) but the image disappears. I am not clear as to what translation I should use.
The fiddle is here If you uncomment the lines to set the attributes (x,y) for the image, the image disappears.
I want to understand how the scale function exactly works and what I am doing wrong here.
回答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!
来源：https://stackoverflow.com/questions/42102027/flip-image-in-svg-centered-at-x-y