次のコードを使用して、jQuery SVG に 2 つの画像を読み込みます。
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);
});
以下に示すように、左 (下に移動) または右 (上に移動) ではなく、上または下に移動します。
この問題を解決する理由と方法は?
ティア
ヨギ・ヤン