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")、ターゲット要素を視覚的に 100px 右に移動できます (たとえば)。

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 に答える