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) + ")");
                } 
            }
        );

Answer 2

OK, now that I have reread your question, it seems that you want to use transform="scale()" and encountering the mysterious "move" also, which is confusing for most beginners learning SVG (me included).

Scaling is measured from the origin(0,0), hence if the object is at location (50,-100), when applying scale(2), the object location is doubled to (50*2, -100*2) => (100, -200). Hence you need to correct this by translate(-50,100).

Using matrix() would be the next area to explore as it is quite intuitive. The above example would require matrix(2 0 0 2 -50 100) to scale and move it back to original. Also with matrix() code, you can perform flip() and mirror() easily with the 2nd and 3rd field. Again you have to translate the length and/or width of object for these two transformation.