1

次のコードを使用して、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);
});

以下に示すように、左 (下に移動) または右 (上に移動) ではなく、上または下に移動します。

ここに画像の説明を入力

この問題を解決する理由と方法は?

ティア

ヨギ・ヤン

4

0 に答える 0