使用 SVG 和 CSS 创建可信的椭圆轨道元素（平面）？

Question

第一次问题海报在这里。经过两天多在 StackOverflow 和其他网站上的搜索，并自己使用 CodePen 进行操作，我似乎无法弄清楚如何为非圆形的 SVG 元素创建轨道路径。

这是我想出的最接近的东西的副本：http://codepen.io/Whatsit2yaa/pen/epbbRR?editors=100 还有代码-

HTML：

<svg width="600" height="500" viewbox="0 0 600 500">

    <path id="flight-path" fill="none" stroke="#CCC" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10" d="M592.7,308.1c-28.5,108.8-183,162.6-344.9,120.2C85.8,385.8-22.4,263.2,6.1,154.3
C34.6,45.5,189.1-8.3,351.1,34.2C513,76.6,621.2,199.3,592.7,308.1z"/>

    <g id="plane" transform="translate(-199.4, -413.2)" scale="0.8">
        <path d="M199.4,413.2L199.4,413.2c0.3,5.4,10.9,8.9,10.9,8.9l29.9,7.5l13.5,41.2l12.1,3.3l-6.6-37.8l24.6,6.8l3.9,6.2
    l8,3.5l-4-14.1l10.7-10l-8.6-1.1l-6.5,3.3l-24.6-6.8l25.1-29l-12.1-3.3l-32.8,28.4l-29.7-9C213.1,411.1,202.4,408.7,199.4,413.2z" fill="#333"/>
     </g>
     <animateMotion 
       xlink:href="#plane"
       dur="3s"
       begin="0s"
       fill="freeze"
        repeatCount="indefinite"
             rotate="auto-reverse"
         >
         <mpath xlink:href="#flight-path" />
      </animateMotion>
</svg>

CSS：

html, body {
    height: 100%;
}

body {
    background: -webkit-linear-gradient(#FFF, #3276b1); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFF, #3276b1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFF, #3276b1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFF, #3276b1); 
}

svg {
    position: fixed;
    overflow: visible;
    top: 20%;
    height: 60%;
    left: 20%;
    width: 60%;
}

这是一支笔，展示了我想要实现的目标： http://codepen.io/guerreiro/pen/obhzc

代码 - HTML：

<svg viewBox="0 0 160 160" width="160" height="160">
   <circle cx="80" cy="80" r="50" />
   <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
      <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
          <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
      </path>
  </g>
  <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>

CSS：

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background: #FC0;
}

svg {
    position: fixed;
    top: 20%;
    height: 60%;
    left: 20%;
    width: 60%;
}

我似乎无法得到一个不圆的 SVG 来正确调整和变换，因为它绕着椭圆形轨道运行的行星。

如果超出 SMIL 的能力，我愿意使用带有 CSS 变换的 SVG 图像。有动画师可以给我建议/帮助吗？非常感谢！

Answer 1

对于椭圆轨道，您可以使用

calcMode="spline"

。下面的例子并不准确（我没有做数学），但它给出了一个想法：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="288" viewBox="0 0 512 288">
<ellipse fill="none" stroke="#000" stroke-width="3" id="orbit" cx="256.5" cy="144" rx="234" ry="121.5" />
<circle r="20" fill="yellow" stroke="black" stroke-width="3">
    <animateMotion begin="0s" dur="6s" repeatCount="indefinite" calcMode="spline" keyTimes="0; 1" keySplines="0.3 .75 0.75 0.3">
        <mpath xlink:href="#orbit"/>
    </animateMotion>
</circle>
</svg>