如何使用SVG绘制椭圆,基于焦点而不是中心?

时间:2013-10-17 16:47:07

标签: math svg geometry trigonometry ellipse

我正在用SVG绘制围绕恒星的行星轨道,我需要绘制一个基于一个焦点而不是几何中心的椭圆。我在2d画它,但是位置需要考虑椭圆在焦点周围的旋转,以及到Z轴的倾斜。

我已经拥有跟随轨道路径的行星,但我似乎可以绘制下面的椭圆,以便它们匹配。我有所有的轨道数据,包括所有旋转参数,半主轴和半短轴。我知道我有我需要的所有数据,我似乎无法弄清楚如何把它放在一起。请帮忙!

以下是轨道组件图:http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Orbit1.svg/400px-Orbit1.svg.png

示例轨道数据

name: Mercury
semi-major axis (AU): 0.387098
eccentricity: 0.205630
longitude of ascending node (deg): 48.331
inclination (deg): 7.005
argument of perihelion (deg): 29.124

我需要焦点位于0,0。通过计算半短轴(ry = 0.387098 * sqrt(1 - 0.205630 ^ 2)),我可以使椭圆形状如下:

<ellipse cx="0" cy="0" rx="0.387098" ry="0.378826" />

我也可以通过计算中心和焦点之间的距离(cx = sqrt(0.387098 ^ 2 - 0.378826 ^ 2))将焦点居中于0,0,所以我有这个:

<ellipse cx="0.079597" cy="0" rx="0.387098" ry="0.378826" />

我无法弄清楚如何围绕点0,0旋转椭圆。我可以使用上升节点的经度围绕几何中心顺时针旋转,但我也需要在Z方向上旋转椭圆,这也会影响rx和ry值。我也认为近日点的论点也适合这里,但我不知道在哪里。

我知道这些值小于1,但是一旦我弄清楚这个过程,我会用乘数来扩大所有值。


更新

感谢BigBadaboom,我现在可以围绕焦点旋转椭圆。我仍然需要弄清楚如何在3d中旋转它。尽我所知,这些是以下步骤:

  1. 将焦点转换为0,0 - 完成
  2. 通过近日点(29.124deg)的参数沿z轴(2d旋转)旋转 - 完成(感谢BigBadaboom)
  3. 沿y轴(3d旋转)按倾斜度(7.005deg)旋转 -
  4. 再次沿着z轴旋转上升节点的经度(48.331deg) - 与步骤2相同的过程。
  5. 所有旋转都以0,0为中心。

3 个答案:

答案 0 :(得分:1)

这也来得很晚,但是我刚刚看到了您的帖子……并且在工作了几个月后才自己解决了问题……

没有直接的公式可以做到这一点。您需要在3D中沿三个轴旋转椭圆,这是通过使用旋转矩阵完成的。使用SVG做到这一点的简短方法是……你做不到!

但是,如果您使用一些天文馆软件,您会发现某些软件确实绘制了某些物体(例如行星状卫星)的轨道椭圆。我问了一个这样的天文馆软件的设计者,它是如何完成的,他告诉我他们只是绕轨道计算很多点,以矩阵3D旋转每个点,然后“连接点”。此过程可能会占用大量处理器,并且要花很长时间(在计算机上,甚至一秒钟都是“很长!”),所以我希望能采用一种不同的方法,就像我过去所做的那样。 >

然后,我意识到绘制一个椭圆,沿着椭圆只需要五个点,因此不需要一堆连接点的过程。我的方法是沿椭圆仅对5个点进行3D矩阵旋转。这些很容易确定:

  • 升序节点
  • Periastron
  • 降序节点
  • Apoastron
  • 沿轨道的一个随机点,最好不要太靠近上述四个点,例如。选定的物体在观察时所在的位置

然后可以按照一个简单的过程(例如,http://astrowww.phys.uvic.ca/~tatum/celmechs/celm2.pdf第55-59页中说明的过程)从这些点绘制其余的椭圆。

我没有“实时”链接来显示结果,但我正在努力! ;-)

答案 1 :(得分:0)

我不确定我是否完全了解你要做的所有事情。但你可以像这样执行大约0,0的旋转:

<ellipse cx="0.079597" cy="0" rx="0.387098" ry="0.378826" transform="rotate(<angle> 0 0)"/>

答案 2 :(得分:0)

这可能有点太晚了,但我自己也在努力解决同样的问题并试图找到一些解决方案。

我认为SVG不支持3D旋转,但您可以使用 CSS3转换

Here是我用CSS转换制作的SVG示例。

对于没有CSS浏览器前缀的更干净的SVG(-webkit,-moz等)see here。在这个版本中,至少Chrome将无法渲染3D变换,并且SVG中的轨道可能看起来有点像您在第3步之前的版本。

您可以将url参数用于SVG文件的其他变体:

  • 尺寸:数字 - &gt; SVG的大小(以像素为单位)
  • bbox :数字 - &gt; AU(1-200)
  • 中边界框的大小
  • noPrefixes - &gt;不要包含CSS浏览器前缀

例如:solar.svg?size=800&bbox=160&noPrefixes

对我来说,接下来的步骤将是根据TLE数据计算轨道和实际行星位置。在当前版本中,行星在其轨道上处于随机位置,当然轨道也不准确。