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

Manumit

Try phrogz excellent answer – Vicenary

@Alvin:that is not relevant to my requirement. – Manumit

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

Tacklind

may i know what is the value -78.11 and 66.75 u mentioned in that post and changed in next line like 78.11,-66.75 – Manumit

i have edited the question.could you please refer it. am doing doing animation with scale value from centered position of element – Manumit

Those values are the centre of the shape you drew. You can use getBBox. In which case the values are box.x + box.width/2 and box.y + box.height/2. First translate the negative of these values then scale, then translate back the positive value. – Tacklind

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.

Vicenary

i tried like some thing below translate(-centerX*(factor-1), -centerY*(factor-1)) scale(factor) – Manumit

referred from below link commons.oreilly.com/wiki/index.php/SVG_Essentials/… – Manumit

but its not working still moving. i am using translate as well – Manumit

:colud you please refer the link ? – Manumit