通过jquery ui拖动SVG组

Question

我使用以下代码拖动SVG组:

 $('svg g').draggable({
                       drag: function (event, ui) {
                        var position = ui.position;
                        var $shape = $(this);
                        var transform = $shape.attr("transform");
                        var translate = /translate(s*([^s,)]+)[ ,]([^s,)]+)/.exec(transform);
                        ُ$shape.attr("transform", "translate(" + (position.left + ($shape[0].getBoundingClientRect().width / 2)) + "," + (position.top + ($shape[0].getBoundingClientRect().height / 2)) + ")");
                        }
                });

  <svg><g class=" ui-draggable ui-draggable-handle" transform="translate(0,0)">
<path fill="#FBC596" stroke="#C35A05" stroke-width="1.5" d="M0,20L20,0l20,20L20,40L0,20z" />
<rect height="1.339713" width="16.172249" y="19.186603" x="12.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#c35a05" fill="#fbc596" />
<rect transform="rotate(-90 20,20) " height="1.339713" width="16.172249" y="19.186603" x="12.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#c35a05" fill="#fbc596" />
                                        </g>
                                        </svg>

但SVG组不拖动成功位置!

Answer 1

我已经用这段代码解决了这个问题

 drag: function (event, ui) {
            var t = event.target.transform.baseVal;
            if (t.numberOfItems === 0) {
                t.appendItem(svg.root().createSVGTransform());
            }
            var offX = parseInt($(event.target)[0].getBBox().x);
            var offY = parseInt($(event.target)[0].getBBox().y);
            if ($.browser.chrome) {
                t.getItem(0).setTranslate(ui.position.left - offX, ui.position.top - offY);
            } else {
                t.getItem(0).setTranslate(ui.position.left, ui.position.top);
            }