how to scale the element by keeping the fixed position in svg

Question

i want to scale the below element in fixed position.

<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)"/>

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.

i have referred following link.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

how to do fixed scaling ?

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.

 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) && !sf.util.isNullOrUndefined(x) && !sf.util.isNullOrUndefined(y)) {
                  $(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")");
              }
          }
      )

referred the below link for scaling in centered point.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

but it still starts from origin and enlarges the element.

Thanks,

Siva

Answer 1

Scaling is centred on the origin (0, 0), so if your shape is not centred on (0, 0) it will appear to move. To fix this first translate your shape so it is centred on the origin, then scale it, then translate it back:

transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"

Note that the transformations are done in reverse order.

You could simplify things by creating a shape centred on the origin to start with and then scaling and transforming it.

<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>

You could also convert the transform into matrix, which would be more efficient:

<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>

[EDIT] To use jQuery animate, this should work (scaling from 0 to 1 over 4 seconds):

        var box = element.getBBox();
        var cx = box.x + box.width/2;
        var cy = box.y + box.height/2;

        $(element).animate(
            { scale: 1 },
            { duration: 4000,
              step: function(now, fx) {
                    scaleVal = now;
                    $(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")");
                } 
            }
        );