2012-04-03 5 views
0

私はグループを作成し、スケーリングしました。私は他の属性ではないスケールグループの形状をコピーしたい。特に私は変換行列を取り除きたい。スケーリングされたもの。これを行うことが可能かどうかわからないのですか?ここでは、コード:svgクローンのみスケールグループの

グループの自動車用:関数を呼び出す

<svg id="game" version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" onload="loadFunction()" > 
    <!-- Car --> 
    <g id="exCar" x="50" y="500" transform="" > 
     <path id="front" d="M 40 500 Q 110 450 110 500 L 40 500" fill="pink" stroke="black" /> 
     <path id="window" d="M 40 500 L 50 530 L 100 530 L 110 500 L 40 500 "stroke="black" /> 
     <path id="sides" d="M 40 500 L 40 580 L 50 560 Q 55 550 50 530 L 40 500 M 110 500 L 110 580 L 100 560 Q 95 550 100 530 L 110 500" fill="pink" stroke="black" /> 
     <path id ="back" d="M 40 580 L 100 560 L 40 580" fill="pink" stroke="blue" /> 
     <path id="wheels" d="M 40 475 L 30 475 L 30 500 L 40 500 z M 110 475 L 120 475 L 120 500 L 110 500 z M 40 545 L 30 545 L 30 570 L 40 570 z" fill="yellow" stroke="black" /> 
     <image id="carpicture2" x="50" y="455" xlink:href="img.jpg"></image> 
     <text id="carName" x="50" y="575"></text> 
    </g> 
</svg> 

ボタン:コピーする

<rect x="120" y="600" width="80" height="30" stroke:#FF0066" onclick="cloning()"/> 

機能:

function cloning() { 
    var newCar = document.getElementById("exCar").cloneNode(true); 
    newCar.setAttribute("x", 400); 
    newCar.setAttribute("y", 600); 
    document.getElementById("game").appendChild(newCar); 
    alert("!!!!"); 
}; 

スケーリング:

document.getElementById("exCar").setAttribute(
     "transform", 
     "matrix(" + result/100 + ",0,0," + result/100 + "," 
       + (x - (result/100 * x)) + "," + (y - (result/100 * y)) 
       + ")"); 

(結果はスライダーバーから計算されます)

+0

@mihai眠っていたことがいけないしてください。 ) – Ecrin

+0

こんにちは、どのようにスケーリングを行っているのかわかりますか? – mihai

+0

私はスケーリングのために編集しました – Ecrin

答えて

0

私は今問題を理解していると思いますので、クリックするとクローン作成が行われるので、exCarはすでにその点でスケーリングされています。

私が唯一のオプションは、クローニング機能内trasnformation行列をクリアすることです推測:

newCar.setAttribute("transform", "matrix(1,0,0,1,0,0)"); 

と翻訳を行います。

newCar.setAttribute("transform", "translate(350,100)"); 

http://jsfiddle.net/mihaifm/ZR4r8/5/

+0

変更されたx、y座標のexCarインスピレーション上にあります – Ecrin

+0

が合意しました:))グループのx、y座標を設定していますが、パスデータは変わりません。 – mihai

+0

を翻訳する必要がありますが、私は矢印で新しい車を移動します。変換された行列は必要ありません。もう一度変換すれば、exCarとの違いは何ですか?それは変換された行列を作成しませんか? – Ecrin

関連する問題