在jQuery SVG中，为什么坐标不能按预期工作

Question

我使用代码在jQuery SVG中加载了两个图像：

svg.image(0, 0, 330, 540, 'images/img1.jpg', {id: 'img'});
svg.image(0, 0, 330, 540, 'images/iPhone5png.png', {id: 'imgphone'});

加载图像后，它看起来像这样：

我将图像（瓶子）旋转到90度：

现在，如果我尝试使用以下代码以交互方式向左或向右移动（瓶子）图像：

//Move Left
$('#moveleft').click(function(){
var svg = $('#svgphone').svg('get');
var cx = $('#img', svg.root()).attr('x');
cx = eval(cx) - 10;
$('#img', svg.root()).attr('x', cx);
});
//Move Right
$('#moveright').click(function(){
var svg = $('#svgphone').svg('get');
var cx = $('#img', svg.root()).attr('x');
cx = eval(cx) + 10;
$('#img', svg.root()).attr('x', cx);
});

它向上或向下移动而不是向左（向下移动）或向右移动（向上移动），如下所示：

为什么以及如何解决这个问题？

TIA

Yogi Yang