javascript - 以 x,y 为中心翻转 svg 中的图像

Question

我正在尝试反转 svg 中的图像。我遇到了这个thread但此解决方案适用于放置在原点 (0,0) 的图像。

如果图像的宽度是100并且图像位于(0,0)，那么我执行以下操作

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

我尝试翻转/反转放置在 (x,y) 处的图像，但图像消失了。我不清楚我应该使用什么翻译。

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

祝你好运!