如何围绕椭圆设置 SVG 圆圈的动画答案

【问题标题】：How to animate an SVG circle around an ellipse如何围绕椭圆设置 SVG 圆圈的动画
【发布时间】：2019-01-16 12:30:07
【问题描述】：

这可能与 Ruby 几年前提出的类似问题重复，但遵循发布的建议并没有为我找到解决方案。当然可能是我的问题。

我正在尝试生成摆线曲线（围绕其他曲线旋转的圆）但我想创建围绕椭圆旋转的圆的曲线 - 而不是圆。

我可以让一个圆沿着椭圆路径移动。

我可以让一个圆围绕它的中心旋转。

我需要同时制作这两个动画，但我的对象在我的视图框中的其他地方跟随一条路径。

html, body, svg {
  width: 100%;
  height: 100%;
}

<svg viewBox="0 0 700 700">
    <path id="OUT" d="M200,250
    a220,110 0 1,0 600,0
    a220,110 0 1,0 -600,0"
    style="fill:none;stroke:#ccc; stroke-width:2" />

    <g id="CC">
    <circle r=40 cx=200 cy=250 fill="none" stroke="black" stroke- width="2"/>
    <g id="C1">
        <circle r=5 cx=200 cy=250 fill="green"/>
    </g>
    <circle cx="240" cy="250" r="3" fill="blue" />
    </g>

    <animateTransForm
    xlink:href="#CC"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="0 200 250" to="360 200 250" begin="1s" dur="10s"
    additive="sum" />

    <animateTransform
    xlink:href="#CC"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    mpath xlink:href="#OUT"
    from="0 300 250" to="360 300 250"
    begin="1s" dur="10s" fill="freeze"
    additive="sum"/>

</svg>

希望这能让别人了解我的努力，并引发解决方案。非常感谢。 www.softouch.on.ca

【问题讨论】：

你指的是什么帖子？听起来很奇怪，有人谈到<animateTransform>，你确定不是<animateMotion>？此外，当我们看到这个奇怪的mpath 论点时......无论如何，this fiddle 会重现你所追求的吗？
@Kaiido 如果是摆线动画，蓝点会停留在最大的椭圆上，看起来圆在绕着大椭圆滚动。
Ruby 提出的这个神秘问题是什么？
@RobertLongson 你可能是对的，尽管我仍然很难理解它的真正含义......like this？无论如何，我的评论的主要目标是获得更多关于 OP 正在谈论什么的信息，因为它很可能仍然是你所说的这个 神秘问题 的副本。啊，我想I found it。事实上，那里没有<animateTransform>。
您好 Kaiido，是的，这正是我想要的。我将与我的尝试进行比较，看看我偏离了轨道（不是双关语）。

标签： svg

【解决方案1】：

您只需要使用 animateMotion 将线条动画应用于任何形状刚刚设置，因此动画可以知道它必须走哪条线
因为transform translate issue我手动设置了transform 翻译，它可以在不设置转换翻译的情况下工作圈子
我使用 css 关键帧动画来旋转小圆圈和两者动画一次不起作用所以我添加了一层（作为<g>标签）在主 <g> 标签内

html, body, svg {
  width: 100%;
  height: 100%;
}

<svg width="500" height="500" viewBox="0 0 1000 1000" >
  <def>
    <style>
     @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);

        }
        to {
            -webkit-transform: rotate(359deg);
        }

      }

        #extrag{
        transform-origin: left;
           animation: rotation 5s infinite linear;
           transform-origin: 201px 250px;
        }
    </style>
  </def>
    <path id="OUT" d="M200,250
    a220,110 0 1,0 600,0
    a220,110 0 1,0 -600,0"
    style="fill:none;stroke:#ccc; stroke-width:2" />

  <g id="CC" transform="translate(-190,-245)">
     <g id="extrag">
    <circle r=40 cx=200 cy=250 fill="none" stroke="black" stroke-width="2"/>
    <g id="C1" >
        <circle r=5 cx=200 cy=250 fill="green"/>
    </g>
    <circle cx="240" cy="250" r="3" fill="blue">
    </circle>

    </g>
         <animateMotion 
  xlink:href="#CC"
  attributeName="motion"
  attributeType="XML"
  additive="sum"
  dur="6s"
  repeatCount="indefinite">
      <mpath xlink:href="#OUT"/>
  </animateMotion>
   </g>
  
  
</svg>

【讨论】：