svgの固定位置を維持して要素を拡大/縮小する方法

Question

下の要素を固定位置に拡大したいと思っています。

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

開始スケーリングでは、ある場所から別の場所に移動するときです。私はオブジェクトを移動したくないだけです。オブジェクトのサイズを大きくしたいだけです。

私は以下のリンクを参照しました。

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

はどのように固定されたスケーリングを行うには？

私は要素をアニメーション化したい、つまり固定された位置でサイズを拡大したいと思います。私は次のように実装しました。しかし、それは原点から要素を移動させます。下記のコードを参照してください。

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

は、以下のセンタリングポイントのスケーリングのリンクを参照しました。

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

が、それはまだ原点から始まり、要素を拡大。スケーリングは、原点を中心としたシヴァ

Answer 1

あなたの形状をを中心にされていない場合ので

おかげで、

（0、0）、（0、0）には、移動するために表示されます。それが原点が中心となるので、これが最初にあなたの形状を変換する修正するには、それを拡張し、それをバック翻訳：変換は逆の順序で行われていることを

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

注意。

原点を中心とした形状を作成し、次にそれを拡大縮小して変形することで、作業を簡素化できます。

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

あなたはまた、より効率的と思われる、マトリックスに変換する変換することができます：jQueryのアニメーションを使用するには

<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]を、この作業をする必要があります（0から1へのスケーリング4秒以上）：

 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]を今私はあなたの質問を読んで、それはtransform="scale()"と謎の "動き"にも遭遇します。これはSVG（私が含む）を学ぶ初心者にとっては紛らわしいものです。

スケーリングがscale(2)適用する場合、オブジェクトが位置(50,-100)、であり、したがって場合、origin(0,0)から測定される、オブジェクトの位置は、(50*2, -100*2) =>(100, -200)に倍増されます。したがって、translate(-50,100)でこれを修正する必要があります。

matrix()を使用すると、それは非常に直感的なので、次の探索領域になります。上記の例では、matrix(2 0 0 2 -50 100)が必要です。またmatrix()コードでは、2番目と3番目のフィールドでflip()とmirror()を簡単に実行できます。ここでも、これらの2つの変換のためにオブジェクトの長さおよび/または幅を変換する必要があります。