title: how to scale the element by keeping the fixed position in svg
body: <p>i want to scale the below element in fixed position.</p>
  
  <pre><code>&lt;path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/&gt;
  </code></pre>
  
  <p>when am start scaling it moves from one location to another location. i don't want to move the object i just want to enlarge the size of object.</p>
  
  <p>i have referred following link.</p>
  
  <p><a href="http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System">http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System</a></p>
  
  <p>how to do fixed scaling ?</p>
  
  <p>i want to animate the element i.e enlarge the size in fixed position. i have implemented in following way. but it sill moves the element from origin. please refer below code.</p>
  
  <pre><code> var box = element.getBBox();
   var scaleVal=null, x=null, y=null;
   $(element).animate(
       {
            scale: 1,
            centerX:box.x+(4*transX),
            centerY:box.y+(4*transY)
       },
       {
            duration: 4000,
            step: function(now,fx) {
                if (fx.prop == "scale") {
                     scaleVal = now;
                } else if (fx.prop == "centerX") {
                     x = now;
                } else if (fx.prop == "centerY") {
                     y = now;
                }
  
                if(!sf.util.isNullOrUndefined(scaleVal) &amp;&amp; !sf.util.isNullOrUndefined(x) &amp;&amp; !sf.util.isNullOrUndefined(y)) {
                    $(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")");
                }
            }
        )
  </code></pre>
  
  <p>referred the below link for scaling in centered point.</p>
  
  <p><a href="http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System">http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System</a></p>
  
  <p>but it still starts from origin and enlarges the element.</p>
  
  <p>Thanks,</p>
  
  <p>Siva</p>