一个通用的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