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变换奇怪的行为

回答

相关问题