8

下の要素を固定位置で拡大縮小したい。

<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

ただし、原点から開始し、要素を拡大します。

ありがとう、

シヴァ

4

2 に答える 2

19

スケーリングは原点 (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)"/>

変換を行列に変換することもできます。これはより効率的です。

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

[編集] jQuery animate を使用するには、これが機能するはずです (4 秒で 0 から 1 にスケーリング):

        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) + ")");
                } 
            }
        );
于 2013-06-06T13:25:02.860 に答える