首页 文章

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

提问于
浏览
1

我正在用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中旋转它 . 尽我所知,这些是以下步骤:

  • 将焦点转换为0,0 - done

  • 通过近日点(29.124deg)的参数沿z轴(2d旋转)旋转 - done (感谢BigBadaboom)

  • Rotate along the y-axis (3d rotation) by the inclination (7.005deg) - ???

  • 再次沿z轴旋转上升节点的经度(48.331deg) - 与步骤2相同的过程 .

所有旋转都以0,0为中心 .

2 回答

  • 0

    我不确定我是否完全理解你要做的所有事情 . 但你可以执行大约0,0的旋转,如下所示:

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

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

    我不认为SVG支持3D旋转,但您可以使用 CSS3 transform 代替 .

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

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

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

    • size :number - > SVG的大小(以像素为单位)

    • bbox :数字 - > AU中的边界框大小(1-200)

    • noPrefixes - >不要包含CSS浏览器前缀

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

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

相关问题