jQuery的SVG變換奇怪的行爲

我試圖旋轉的SVG <polygon>（或任何其他元素）：jQuery的SVG變換奇怪的行爲

var svg = new $.svg._wrapperClass($('#test')); 
$(svg._svg).animate({svgTransform: 'rotate(720,100,100)'}, 2000);

多邊形真正改變其角度，但與移動的一些奇怪的軌跡。請轉到此鏈接查看它：http://jsfiddle.net/ExaBP/

我的目標是使多邊形圍繞其中心旋轉。

來源

2012-03-23 MDI

嘗試渲染使用其他應用程序的形狀，如[inkscape]（http://inkscape.org/），看看是否有任何改變。 – 2012-03-23 14:15:07

該動作看起來像動畫不僅通過720動畫，而且通過x和y值。這就是爲什麼它是一個螺旋。 – Andrew 2012-03-23 15:40:44

安德魯，你已經看到了代碼。只有旋轉。 – MDI 2012-03-23 16:22:46

的問題是，旋轉中心的多邊形的座標爲（0,0）>露怯：

points="38.8313,102.22 42.1242,104.613 45.4171,107.005 44.1593,110.876 42.9015,114.747 38.8313,114.747 34.7611,114.747 33.5034,110.876 32.2456,107.005 35.5384,104.613"

所以，如果你使用（CX，CY）的旋轉動畫，這些參數也是動畫的，從0到100，然後是0.

您必須在動畫前後更改中心。

但在這裏，我想你需要一個不同的計算策略：

嘗試直接在HTML創建SVG或JS
或嘗試之前修改coordonates的原產地在你的繪圖程序出口。

來源

2012-03-27 19:01:17 Akarun

您是否知道如何在Inskape或CorelDRAW中正確修改座標？ – MDI 2012-03-28 06:01:49

我無法在html或js中創建svg，因爲我的真實svg比帶框的多邊形複雜得多。 – MDI 2012-03-28 06:03:20

確實......另一個解決方案是將多邊形設置爲中心，並在合成中的正確位置移動它。請參閱：http://www.w3.org/TR/SVG/coords.html#EstablishingAnwUserSpace 而且，至少，你有一個解釋，不是嗎？ – Akarun 2012-03-28 06:24:52

jQuery的SVG變換奇怪的行爲

回答

相關問題