come ridimensionare l'elemento mantenendo la posizione fissa in svg

Question

Voglio ridimensionare l'elemento sottostante in posizione fissa.

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

quando inizio a ridimensionare si sposta da una posizione a un'altra posizione. non voglio spostare l'oggetto voglio solo ingrandire la dimensione dell'oggetto.

ho indicato il seguente link.

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

come fare scala fissa?

voglio animare l'elemento i.e ingrandire la dimensione in posizione fissa. ho implementato nel modo seguente. ma il davanzale sposta l'elemento dall'origine. si prega di fare riferimento al codice sottostante.

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

indicato il collegamento sottostante per il ridimensionamento in punto centrale.

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

ma comincia ancora dall'origine e allarga l'elemento.

Grazie,

Siva

Answer 1

Scaling è centrata sull'origine (0, 0), quindi se la forma non è centrata sul (0, 0) apparirà a muoversi. Per risolvere questo primo tradurre la forma in modo che sia centrato sulla provenienza, ridimensionarlo, poi tradurlo indietro:

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

Nota che le trasformazioni sono fatte in ordine inverso.

È possibile semplificare le cose creando una forma centrata sull'origine per iniziare e ridimensionarla e trasformarla.

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

Si potrebbe anche convertire il trasformarsi in matrice, che sarebbe più efficiente:

<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] Per utilizzare jQuery animare, questo dovrebbe funzionare (scala da 0 a 1 oltre 4 secondi):

 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, ora che ho riletto la tua domanda, sembra che tu voglia utilizzare transform="scale()" e incontrando anche la misteriosa "mossa", che è fonte di confusione per molti principianti che imparano SVG (me incluso).

Normalizzazione viene misurata dal origin(0,0), quindi se l'oggetto è in posizione (50,-100), nell'applicare scale(2), la posizione dell'oggetto viene raddoppiata a (50*2, -100*2) =>(100, -200). Quindi è necessario correggere questo da translate(-50,100).

Utilizzare matrix() sarebbe la prossima area da esplorare in quanto è abbastanza intuitivo. L'esempio precedente richiede matrix(2 0 0 2 -50 100) per ridimensionarlo e spostarlo nuovamente all'originale.Anche con il codice matrix(), è possibile eseguire flip() e mirror() facilmente con il 2 ° e il 3 ° campo. Ancora una volta devi tradurre la lunghezza e/o la larghezza dell'oggetto per queste due trasformazioni.