0

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.

Community
  • 1
  • 1
Dinesh
  • 2,194
  • 3
  • 30
  • 52

1 Answers1

2

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!

spooky
  • 1,620
  • 1
  • 13
  • 15