In jQuery SVG why do coordinates not work as expected <p>I load two images in jQuery SVG using the code:</p> <pre><code>svg.image(0, 0, 330, 540, 'images/img1.jpg', {id: 'img'}); svg.image(0, 0, 330, 540, 'images/iPhone5png.png', {id: 'imgphone'}); </code></pre> <p>After the images are loaded it looks like this:</p> <p><img src="https://i.stack.imgur.com/XVy6h.png" alt="enter image description here"></p> <p>I rotate the images (of bottles) to 90 degree:</p> <p><img src="https://i.stack.imgur.com/AwUlb.png" alt="enter image description here"></p> <p>Now if I try to more the (bottle) image left or right interactively using following code:</p> <pre><code>//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); }); </code></pre> <p>It moves up or down instead of left (moved down) or right (moves up) as shown below:</p> <p><img src="https://i.stack.imgur.com/e3jwQ.png" alt="enter image description here"></p> <p>Why and how to solve this problem?</p> <p>TIA</p> <p>Yogi Yang</p>