如何通過保持固定位置來縮放元素

我想縮放固定位置下面的元素。如何通過保持固定位置來縮放元素

<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

，但它仍然從原點開始，擴大元素。

感謝，

溼婆

來源

2013-06-05 SivaRajini

嘗試[phrogz]（http://stackoverflow.com/questions/4850821/svg-coordinates-with-transform-matrix）優秀答案 –

@Alvin：這與我的要求無關。 – SivaRajini

縮放的中心位於原點（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動畫，這應該工作（從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) + ")"); 
       } 
      } 
     );

來源

2013-06-06 13:25:02

我可以知道在這篇文章中提到的值-78.11和66.75是什麼，並且在下一行中更改，如78.11，-66.75 – SivaRajini

我編輯了這個問題。請您參考它。我正在做元素中心位置的縮放值動畫 – SivaRajini

這些值是您繪製形狀的中心。你可以使用getBBox。在這種情況下，值是box.x + box.width/2和box.y + box.height/2。首先翻譯這些值的負值然後縮放，然後將正值翻譯回來。 –

好的，現在我已經重讀了你的問題，好像你想用transform="scale()"也遇到了神祕的「舉動」，這對於大多數初學者學習SVG（包括我在內）來說都是令人困惑的。

縮放從origin(0,0)測量，因此，如果該對象是在位置(50,-100)，施加scale(2)時，對象的位置被加倍到(50*2, -100*2) =>(100, -200)。因此，您需要通過translate(-50,100)更正此問題。

使用matrix()將是下一個需要探索的領域，因爲它非常直觀。上述示例需要matrix(2 0 0 2 -50 100)進行縮放並將其移回原始位置。同時使用matrix()代碼，您可以輕鬆地在第2和第3字段執行flip()和mirror()。再次，您必須翻譯這兩個轉換的對象的長度和/或寬度。

來源

2013-06-06 16:03:29

我想在翻譯下面的一些東西（-centerX *（factor-1），-centerY *（factor-1））比例尺（因子） – SivaRajini

參考下面鏈接http://commons.oreilly.com/wiki/index .php/SVG_Essentials/Transforming_the_Coordinate_System – SivaRajini

但它仍不能正常工作。我正在使用翻譯以及 – SivaRajini

如何通過保持固定位置來縮放元素

回答

相關問題