UPDATED： だからここcodepenのコードです：：Javascriptのロジックは

Question

NEWは（絶対COORDSを取得し、SVG）の小さな機能に修正する http://codepen.io/cmer41k/pen/pRJNww/

現在UpdateCoords（ドラッグ）は機能 - コードではコメントアウトされています。 。

私が欲しかったのは、パスの座標（ここでは円としてのパス）を絶対パスに更新し、変換属性を削除することでした。

しかし、私はそれを行うに失敗しています。（（ごめんのみ

OLD学習：私は経由ルートのSVG OBJ（SVG）を中心にドラッグしますSVG要素（パス）を持っている私のコードでは

をプロパティ「（x、y）を変換する」=変換。

私は絶対座標を使用して変換を取り除くために、このようなパス要素の属性「D」（すべてのCOORDSを説明する文字列）を更新したい\ものを翻訳します。

基本的に： は、d = "M10,10 30,10 20,30" + transform = "translate（20,0）; は次のようになります：d = "M30,10 50,10 40,30" + transform = "translate（0,0）"（またはトランスフォームを削除できる場合はさらに良い）

私のためのものですが、適切な結果を妨げるバグがあります。

私はここで何か間違ったことをやっていると確信しています：

var v = Object.keys(path.controlPoints).length 

//制御点ここでは、私はパスのCOORDSを保存するパスオブジェクト内だけの場所です。

var matrix = path.transform.baseVal.consolidate(); 

//私は、上記の行が適切なx、y変換された値を持つ適切な変換行列を与えることを検証しました。今私は、パスのすべての制御点（座標）をループしようと更新しています以下

for (i=0; i<v; i++) { 
    var position = svg.createSVGPoint(); 
    position.x = path.controlPoints["p"+i].x; 
    position.y = path.controlPoints["p"+i].y; 

//私は（またはので、私は思う）行列データを活用することができ、中間svgpointを作成するパスのコントロールポイントの各々のためのように、古い索引を新しいものに「変換する」。

position = position.matrixTransform(matrix); 
    path.controlPoints["p"+i].x = position.x; 
    path.controlPoints["p"+i].y = position.y; 
} 

//私は多分その私がこのループやなめらかで、この位置事をリセット/「掃除」ではないのですので、私はここで何か間違ったことをやっていると確信していますか？

申し訳ありません私はプログラマーではなく、物事を学ぶだけです。このコードでは、私が記述した目的を達成するためにこのコードを使用しました。

Answer 1

いいえ、コードが正常に機能しています。

それで、私はマトリックスを正しく得る方法を考えた後、引き続くドラッグブルのためにまだ変わった変位が残っていました。 私は、それらの変位が機能する前でも起こっていることが明らかになりました。 私はそれを少しデバッグし、私がドラッグに使用する._xと.yyのパラメータをクリアしていないことに気付きました。

コードが機能しました。

http://codepen.io/cmer41k/pen/XpbpQJ

var svgNS = "http://www.w3.org/2000/svg"; 
var draggable = null; 
var canvas = {}; 
var inventory = {}; 
var elementToUpdate = {}; 

//debug 
var focusedObj = {}; 
var focusedObj2 = {}; 
// to be deleted 

window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    inventory = document.getElementById("inventory"); 
    AddListeners(); 
} 
function AddListeners() { 
document.getElementById("svg").addEventListener("mousedown", Drag); 
document.getElementById("svg").addEventListener("mousemove", Drag); 
document.getElementById("svg").addEventListener("mouseup", Drag); 
} 

// Drag function // 
function Drag(e) { 
var t = e.target, id = t.id, et = e.type; m = MousePos(e); //MousePos to ensure we obtain proper mouse coordinates 
if (!draggable && (et == "mousedown")) { 
    if (t.className.baseVal=="inventory") { //if its inventory class item, this should get cloned into draggable 
     copy = t.cloneNode(true); 
     copy.onmousedown = copy.onmouseup = copy.onmousemove = Drag; 
     copy.removeAttribute("id"); 
     copy._x = 0; 
     copy._y = 0; 
     canvas.appendChild(copy); 
     draggable = copy; 
     dPoint = m; 
     } 
     else if (t.className.baseVal=="draggable") { //if its just draggable class - it can be dragged around 
      draggable = t; 
      dPoint = m; 
     } 
    } 
    // drag the spawned/copied draggable element now 
    if (draggable && (et == "mousemove")) { 
     draggable._x += m.x - dPoint.x; 
     draggable._y += m.y - dPoint.y; 
     dPoint = m; 
     draggable.setAttribute("transform", "translate(" +draggable._x+","+draggable._y+")"); 
    } 
    // stop drag 
    if (draggable && (et == "mouseup")) { 
     draggable.className.baseVal="draggable"; 
    UpdateCoords(draggable); 
    console.log(draggable); 
    draggable._x = 0; 
    draggable._y = 0; 
    draggable = null; 
    } 

}