SVG animateMotion 沿着圆而不是路径

Gry*_*yva 2 xml animation svg adobe-illustrator

有没有办法让物体不沿着路径移动,而是沿着圆周移动?例如:

<animateMotion path="M 0,0 C -50,100 -150,100 -200,0" begin="2s" dur="3s" fill="freeze" /> 
Run Code Online (Sandbox Code Playgroud)

这是有效的,因为我们添加了一条路径。

有没有办法可以用圆(在本例中)或任何其他对象替换路径?

<animateMotion
<circle cx="865.9" cy="539.6" r="499.1"/>
begin="2s" dur="3s" fill="freeze" /> 
Run Code Online (Sandbox Code Playgroud)

另外,仅使用 SVG,不使用 HTML(需要将项目作为 .SVG 文件发送)

enx*_*eta 6

您可以写一个圆作为路径。比如这个圈子

 <circle cx="865.9" cy="539.6" r="499.1" />
Run Code Online (Sandbox Code Playgroud)

可以使用 arc (A) 命令将其写成路径,如下所示:

  <path d="M1365,539.6
           A499.1,499.1 0 1 1 366.8,539.6 
           A499.1,499.1 0 1 1 1365,539.6" />
Run Code Online (Sandbox Code Playgroud)

您可以将此路径的 d 属性用于动画:

 <circle cx="865.9" cy="539.6" r="499.1" />
Run Code Online (Sandbox Code Playgroud)
  <path d="M1365,539.6
           A499.1,499.1 0 1 1 366.8,539.6 
           A499.1,499.1 0 1 1 1365,539.6" />
Run Code Online (Sandbox Code Playgroud)