基于snap.svg封装 限制svg拖动范围

Element.limitDrag(…)
{
x: 0, //svg 初始x
y: 0, //svg 初始y
minx: 0, //最小x
miny: 0, //最小y
maxx: 100, //最大x
maxy: 100 //最大y
}

直接复制标签到引入snap插件下方即可使用

  <script>
    (function () {
      Snap.plugin(function (Snap, Element, Paper, global) {
        Element.prototype.limitDrag = function (params) {
          this.data('minx', params.minx);
          this.data('miny', params.miny);
          this.data('maxx', params.maxx);
          this.data('maxy', params.maxy);
          this.data('x', params.x);
          this.data('y', params.y);
          this.data('ibb', this.getBBox());
          this.data('ot', this.transform().local);
          this.drag(limitMoveDrag, limitStartDrag);
          return this;
        };

        function limitMoveDrag(dx, dy) {
          var tdx,
            tdy;
          var sInvMatrix = this
            .transform()
            .globalMatrix
            .invert();
          sInvMatrix.e = sInvMatrix.f = 0;
          tdx = sInvMatrix.x(dx, dy);
          tdy = sInvMatrix.y(dx, dy);

          this.data('x', + this.data('ox') + tdx);
          this.data('y', + this.data('oy') + tdy);
          if (this.data('x') > this.data('maxx') - this.data('ibb').width) {
            this.data('x', this.data('maxx') - this.data('ibb').width)
          };
          if (this.data('y') > this.data('maxy') - this.data('ibb').height) {
            this.data('y', this.data('maxy') - this.data('ibb').height)
          };
          if (this.data('x') < this.data('minx')) {
            this.data('x', this.data('minx'))
          };
          if (this.data('y') < this.data('miny')) {
            this.data('y', this.data('miny'))
          };
          this.transform(this.data('ot') + "t" + [this.data('x'), this.data('y')]);
        };

        function limitStartDrag(x, y, ev) {
          this.data('ox', this.data('x'));
          this.data('oy', this.data('y'));
        };
      });
    })()
  </script>