SVG中的翻转图像以x，y为中心 [英] Flip image in svg centered at x,y

问题描述

我正在尝试将svg中的图像反转.我遇到了这个线程，但是此解决方案适用于原点(0,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).

如果图像的宽度为100，并且图像位于(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)');

我试图翻转/反转放置在(x，y)处的图像，但是图像消失了.我不清楚应该使用哪种翻译.

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.

小提琴在此处 如果取消注释设置图像属性(x，y)的行，图像将消失.

The fiddle is here If you uncomment the lines to set the attributes (x,y) for the image, the image disappears.

我想了解scale函数的工作原理，以及我在这里做错了什么.

I want to understand how the scale function exactly works and what I am doing wrong here.

推荐答案

根据@blex的要求，他提出了修改建议...这是解决方案. https://jsfiddle.net/7b25vq82/5/

On Request from @blex and with modification he proposed... Here is the solution. https://jsfiddle.net/7b25vq82/5/

您需要计算翻转位置，一旦进行计算，Q中的初始代码就可以正常工作...

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

祝你好运！

这篇关于SVG中的翻转图像以x，y为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！