title: Is it possible to set negative width in svg rectangle?
body: <p>i want to move the rectangle based on mouse move. please refer below link.</p>
  
  <p><a href="http://atomicrobotdesign.com/blog_media/draw/draw1.html" rel="noreferrer">http://atomicrobotdesign.com/blog_media/draw/draw1.html</a></p>
  
  <p>get rectangle start position in mousedown event and start dragging it will create the rectangle in mouse move event. but when i  moving to previous value (i.e moving to less than mouse down value meas it will return negative value ) so width become negative.</p>
  
  <p>the above link is canvas rectangle. but i have created svg rectangle with same logic.</p>
  
  <p>negative width for rectangle not supported ? or how can i move the rectangle based on mouse move ? </p>
  
  <p>whats going wrong ?</p>
  
  <p>My code snippet.</p>
  
  <pre><code>ChartMouseDown:function(e){
  
  //       e = this.normalizeMouseEvent(e);
  
  
        var mousedownCords=this.calMousePosition(e);
        this.mouseDownX=mousedownCords.X;
        this.mouseDownY=mousedownCords.Y;
  
        this.chartMouseDownPoint= this.GetValuebyPoint(Math.abs(this.mouseDownX-this.model.m_AreaBounds.X),Math.abs(this.mouseDownY-(this.model.m_AreaBounds.Y + this.model.m_AreaBounds.Height)));
        this.zoomingX=true;
  
      },
  
  
  
  ChartMouseMove: function (evt) {
  
      if( this.zoomingX)
      {
  
      var mouseMoveX,mouseMoveY;
  
       var mouseMoveCords=this.calMousePosition(evt);
        mouseMoveX=mouseMoveCords.X;
        mouseMoveY=mouseMoveCords.Y;
        $(this.ZoomAreaRect).remove();
        var width =  Math.abs(mouseMoveX - this.mouseDownX);
        var height = mouseMoveY - this.mouseDownY;
        var x;
        if(mouseMoveX &gt; this.mouseDownX)
        x= this.mouseDownX;
        else
        x= mouseMoveX;
  
         this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  
          $(this.ZoomAreaRect).attr({
              'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
              'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
          });
  
         $(this.ZoomAreaRect).appendTo(this.SvgObject);
  
      }
  
  
   calMousePosition:function(e)
      {
       var matched = jQuery.uaMatch( navigator.userAgent );
       var browser = {};
       var mouseX,mouseY;
       if(matched.browser.toLowerCase()=="mozilla")
          {
          mouseX = (e.pageX)-  $(this.SvgObject).parent().offset().left;
          mouseY=  (e.pageY) - $(this.SvgObject).parent().offset().top;
          }
          else
          {
          mouseX =  (e.pageX +document.documentElement.scrollLeft)-$(this.SvgObject).offset().left;
          mouseY =  (e.pageY + document.documentElement.scrollTop) - $(this.SvgObject).offset().top;
          }
  
          return { X: mouseX, Y:mouseY};
  
      },
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Siva</p>