【问题标题】:Jquery SVG transformation strange behaviorJquery SVG转换奇怪的行为
【发布时间】:2012-03-23 13:11:29
【问题描述】:

我正在尝试使用此旋转 SVG <polygon>(或任何其他元素):

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

多边形确实改变了它的角度,但有一些奇怪的移动轨迹。 请到此链接查看:http://jsfiddle.net/ExaBP/

我的目标是让多边形围绕其中心旋转。

【问题讨论】:

  • 尝试使用其他应用程序渲染形状,例如inkscape,看看是否有任何变化。
  • 这个动作看起来动画不仅是通过 720 动画,还通过 x 和 y 值。这就是为什么它是一个螺旋。
  • 安德鲁,你已经看到了代码。只有旋转。
  • 在 Inkskape 中渲染没有帮助。同一张照片。

标签: jquery svg transform jquery-svg


【解决方案1】:

问题是你的多边形的旋转中心在 coord(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"

所以,如果你在 animate 中使用 (cx,cy) 进行旋转,这些参数也是动画的,从 0 到 100 然后再到 0。

你必须在动画前后改变中心。

但是在这里,我认为您需要一种不同的方法:

  • 尝试直接在 HTML 或 JS 中创建 SVG
  • 在导出前尝试在绘图程序中修改坐标的原点。

【讨论】:

  • 你知道如何在 Inskape 或 CorelDRAW 中正确修改坐标吗?
  • 我无法在 html 或 js 中制作 svg,因为我真正的 svg 比带框的多边形复杂得多。
  • 确实...另一种解决方案是将多边形设置为中心,然后将其移动到合成中的正确位置。见:w3.org/TR/SVG/coords.html#EstablishingANewUserSpace 而且,至少,你有一个解释,不是吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 2019-10-09
  • 2014-02-18
  • 2016-08-12
  • 2014-10-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多