一個通用的JS功能移動任何SVG元素

考慮到與2個圈（紅色和藍色）這個例子：一個通用的JS功能移動任何SVG元素

<svg width="500px" height="500px"> 
    <circle cx="100" cy="50" r="40" fill="red" id="redcircle" /> 
    <g transform="translate(200,-20)"> 
    <g transform="scale(2)"> 
     <g transform="rotate(45)"> 
     <g transform="translate(5,10)"> 
      <circle cx="100" cy="50" r="40" fill="blue" id="bluecircle" /> 
     </g> 
     </g> 
    </g> 
    </g> 
</svg>

我不知道是否有寫這樣的通用功能的方法：

function move(selection){ 
    // ??? 
}

這將允許編寫move("#redcircle")或move("#bluecircle")，這會將目標元素100px向右移動（例如）。

來源

2013-03-06 bananasplit

看到這個的jsfiddle

function moveSection(idStr, xOffset, yOffset) { 
var domElemnt = document.getElementById(idStr); 
    if (domElemnt) { 
     var transformAttr = ' translate(' + xOffset + ',' + yOffset + ')'; 
     domElemnt.setAttribute('transform', transformAttr); 
    } 
} 
moveSection("bluecircle", 50, 20);

http://jsfiddle.net/dKxZt/4/

它採用轉換爲移動元素。

這裏看到這個演示，實現SVG元素的阻力：Getting the Screen Pixel coordinates of a Rect element

來源

2013-03-06 18:19:33 Matthias

它不起作用：http：//jsfiddle.net/2Yn5t/ – bananasplit 2013-03-06 18:44:54

旋轉是這裏的問題......或者父元素的任何其他翻譯也會改變行爲。也許你可以複製和刪除元素並將其添加到SVG的根元素？ – Matthias 2013-03-06 19:22:12

這就是要點。我實際上想寫一個drag（）方法，以便選定的形狀跟隨鼠標。複製將無濟於事，因爲我將不得不重新定位它，這很難。 – ben 2013-03-06 19:38:15