转换SVG路径使用animateMotion

Question

我想使用svg元素，但我不知道如何正确格式化我的路径。

实际路径是

<path d="M952 881C1174.57 881 1355 700.571 1355 478C1355 255.429 1174.57 75 952 75C729.429 75 549 255.429 549 478C549 700.571 729.429 881 952 881ZM952 882C1175.12 882 1356 701.123 1356 478C1356 254.877 1175.12 74 952 74C728.877 74 548 254.877 548 478C548 701.123 728.877 882 952 882Z" stroke="lightgrey" stroke-width="2" fill="none" />

从我从MDN文档中了解到的，我需要一个不同类型的路径，更像

<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"

用逗号。首先，这种路径叫什么?我可以把我的转换成适合这个结构吗?

谢谢你!

Answer 1

这个路径很好-你试过吗?

<svg width="800px" height="600px" viewBox=" 0 0 2000 800">
  
<path d="M952 881C1174.57 881 1355 700.571 1355 478C1355 255.429 1174.57 75 952 75C729.429 75 549 255.429 549 478C549 700.571 729.429 881 952 881ZM952 882C1175.12 882 1356 701.123 1356 478C1356 254.877 1175.12 74 952 74C728.877 74 548 254.877 548 478C548 701.123 728.877 882 952 882Z" stroke="lightgrey" stroke-width="2" fill="none" />
  
    <circle r="25" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
path="M952 881C1174.57 881 1355 700.571 1355 478C1355 255.429 1174.57 75 952 75C729.429 75 549 255.429 549 478C549 700.571 729.429 881 952 881ZM952 882C1175.12 882 1356 701.123 1356 478C1356 254.877 1175.12 74 952 74C728.877 74 548 254.877 548 478C548 701.123 728.877 882 952 882Z"  />
  </circle>