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

我使用以下代码在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);
});

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

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

短暂性脑缺血发作

---

Yogi Yang

你能创建一个JSFIDLE吗？对不起，我不知道如何使用JSFIDLE。我试过了，但没能成功。以下是链接：