'Convert SVG path to use animateMotion

I'd like to use an element with svg but I don't know how to properly format my path.

My actual path is

<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" />

From what I understood from the MDN docs I need a different type of path more like

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

with commas. First of all how is this type of path called ? Can I convert somehow mine to fit this structure ?

Thanks a lot !

htmlsvg


Solution 1:[1]

That path works fine - did you try it?

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Michael Mullany

Related Questions