2

考虑这个带有 2 个圆圈（红色和蓝色）的示例：

<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")在视觉上将目标元素向右移动 100 像素（例如）。

4

2 回答 2

8

看到这个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/

它使用 translate 来移动元素。

在此处查看此演示以实现 SVG 元素的拖动：获取 Rect 元素的屏幕像素坐标

于 2013-03-06T18:19:33.240 回答
-2

它是用 JQuery 拖放 SVG 希望这个链接可以帮助 http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/

这是演示 http://www.codedread.com/dragtest.svg

于 2014-07-01T10:00:43.940 回答