In jQuery SVG why do coordinates not work as expected

In jQuery SVG why do coordinates not work as expected

I load two images in jQuery SVG using the code: 
  1. svg.image(0, 0, 330, 540, 'images/img1.jpg', {id: 'img'}); svg.image(0, 0, 330, 540, 'images/iPhone5png.png', {id: 'imgphone'});
After the images are loaded it looks like this:


I rotate the images (of bottles) to 90 degree using code:
  1. var svg = $('#svgphone').svg('get');
    var cx = eval($('#img', svg.root()).attr('width'))/2;
    var cy = eval($('#img', svg.root()).attr('height'))/2;
    r = 90;
    var rr = r + ", " + cx + ", " + cy;
    $('#img', svg.root()).attr('transform', 'rotate(' + rr + ')') ;




Now it looks like this:


Now if I try to more the (bottle) image left (or right) interactively using following code:
  1. //Move Left
    var svg = $('#svgphone').svg('get');
    var cx = $('#img', svg.root()).attr('x');
    cx = eval(cx) - 10;
    $('#img', svg.root()).attr('x', cx);



It moves up or down instead of left (moved down) or right (moves up) as shown below:


Why and how to solve this problem?

TIA

Yogi Yang