Question

这可能是几年前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

Answer 1

您只需要使用animateMotion即可在任何刚设置好形状，以便动画可以知道它必须走哪条线
由于transform translate issue我手动设置了转换翻译，无需设置转换即可使用圈
我使用css关键帧动画旋转小圆圈，并且两者都旋转动画一次不起作用，所以我添加了一层（作为$c = ${$b}; // $c points to $a1 for($i = 0; $i <= 5; $i++) { $c[] = $i; // since $c will be modified, it will get a copy of $a1 } // $a1 and $c will be completely different variables标签）在主要$c = &${$b};标签内

<g>

<g>

如何为椭圆周围的SVG圆设置动画

1 个答案: