SVG組翻譯問題

Question

出於特定原因，我必須進行組翻譯（SVG）。我不知道爲什麼我不能正確完成它，因爲翻譯完成後，在另一個單擊組上，它將重置翻譯到開始位置，並使我的傻瓜在SVG畫布上跑來跑去。 我寫的準系統例如在鏈接：http://www.atarado.com/en/stripboard-layout-software/group-translation-problem.svg，這裏是代碼：

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<script><![CDATA[ 
function startMove(evt){ 
x1=evt.clientX; 
y1=evt.clientY; 
group=evt.target.parentNode; 
group.setAttribute("onmousemove","moveIt(evt)"); 
} 
function moveIt(evt){ 
dx=evt.clientX-x1; 
dy=evt.clientY-y1; 
group.setAttributeNS(null,"transform","translate("+ dx + ", " + dy +")"); 
} 
function drop(){ 
group.setAttributeNS(null, "onmousemove",null); 
} 
]]></script> 
<rect x="0" y="0" width="100%" height="100%" fill="dodgerblue"/> 

<g id="BC" transform="translate(0, 0)" onmousedown="startMove(evt)" onmouseup="drop()"><circle id="C" cx="60" cy="60" r="22" fill="lightgrey" stroke="black" stroke-width="8"/><circle id="B" cx="120" cy="60" r="22" fill="orange" stroke="black" stroke-width="8" /></g> 
</svg> 

任何人都願意幫助是值得歡迎的。

Answer 1

組的原因位置上的第二招重置是你設置的轉換翻譯與(dx, dy)等於位置移動之間的差異開始(x1, y1)和當前位置(evt.clientX, evt.clientY)。這意味着當你第二次點擊並且他們稍微移動鼠標時，dx和dy是小數字。然後用它們將變換設置爲稍微偏離初始位置的東西。請記住，在任何時候，應用於該組的變換都必須描述從組的起始位置開始的變換。

解決此問題的一種方法是，將迄今爲止應用於該組的所有移動的總增量存儲起來，並使用此累積的(dx, dy)來構建轉換。例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<script><![CDATA[ 
function startMove(evt){ 
    group=evt.target.parentNode; 
    x1=evt.clientX - group.$x; 
    y1=evt.clientY - group.$y; 
    group.setAttribute("onmousemove","moveIt(evt)"); 
} 
function moveIt(evt){ 
    dx=evt.clientX-x1; 
    dy=evt.clientY-y1; 
    group.setAttributeNS(null,"transform","translate("+ dx + ", " + dy +")"); 
    group.$x = dx; 
    group.$y = dy; 
} 
function drop(){ 
    group.setAttributeNS(null, "onmousemove",null); 
} 
]]></script> 
<rect x="0" y="0" width="100%" height="100%" fill="dodgerblue"/> 
<g id="BC" transform="translate(0, 0)" onmousedown="startMove(evt)" onmouseup="drop()"> 
    <circle id="C" cx="60" cy="60" r="22" fill="lightgrey" stroke="black" stroke-width="8"/> 
    <circle id="B" cx="120" cy="60" r="22" fill="orange" stroke="black" stroke-width="8" /> 
</g> 
<script><![CDATA[ 
var group=document.getElementById("BC"); 
group.$x = 0; 
group.$y = 0; 
]]></script> 
</svg> 

我們增加了兩個屬性到組elememt：$x和$y存儲元件從所有移動當前位置（或累計增量到目前爲止，這取決於你看的方式它）。在定義ID爲「BC」的元素之後，它們被初始化爲零。它們在moveIt()中更新並在startMove()中消耗。由於我們從(x1, y1)中減去($x, $y),startMove()，因此我們在moveIt()之後有效地將這些新增值添加到(dx, dy)。這確保了(dx, dy)爲目前的舉措以及迄今爲止的所有舉措。