考虑这个有两个圆圈(红色和蓝色)的例子:
<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(例如)。
看这个
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/使用translate来移动元素。
查看这里的演示来实现SVG元素的拖动:获取Rect元素的屏幕像素坐标
这是使用JQuery的拖放SVG希望这个链接能有所帮助http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/
这是演示http://www.codedread.com/dragtest.svg