Flip изображение в svg с центром в x, y

Question

Я пытаюсь инвертировать изображение в svg. Я наткнулся на это thread, но это решение работает для изображений, размещенных в начале координат (0,0).

Если ширина изображения 100 и изображение в точке (0,0), то я следующий

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

Я попытался перевернуть/инвертировать изображение помещается в точке (х, у) но изображение исчезает. Я не понимаю, какой перевод я должен использовать.

Сценарий: here Если вы раскомментируете строки для установки атрибутов (x, y) для изображения, изображение исчезнет.

Я хочу понять, как работает функция масштабирования и что я делаю неправильно здесь.

Answer 1

По запросу от @blex и с изменениями он предложил ... Вот решение. https://jsfiddle.net/7b25vq82/5/

Вам нужно вычислить местоположение флип и после того как сделать расчеты, исходный код у вас есть в Q работает отлично ...

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

удачи!