Get all x,y position of a svg circle stroke-CodePudding

I would like to know if there is any way to get all the coordinate(x, y) position of svg circle stroke, so that I can place another item(ex:small circle) on them. Imagine I am making solar system with svg with animation.

CodePudding user response：

It depends on the shape that the small circle needs to follow. If it is just a circle then it is no problem. Here rotated 25 degrees from 12 o'clock:

<svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50 50)">
    <circle r="45" stroke="red" fill="none" />
    <circle cy="-45" r="5" fill="green" transform="rotate(25)" />
  </g>
</svg>

And animating the transform/rotation using <animateTransform>:

<svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50 50)">
    <circle r="45" stroke="red" fill="none" />
    <circle cy="-45" r="5" fill="green" transform="rotate(0)">
    <animateTransform
      attributeName="transform" attributeType="XML"
      type="rotate" from="0" to="360" dur="5s"
      repeatCount="indefinite" />
    </circle>
  </g>
</svg>

If it is any other shape (including a circle...) and it needs to be animated anyway you can use a <animateMotion>:

<svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50 50)">
    <ellipse id="e1" rx="45" ry="25" fill="none" stroke="red" />
    <circle r="5" fill="green">
      <animateMotion dur="5s" repeatCount="indefinite">
        <mpath href="#e1" />
      </animateMotion>
  </circle>
  </g>
</svg>

CodePudding user response：

crwahl his answer adapted to not use the translate
and use the origin on the rotate, from and to attributes:

<svg viewBox="0 0 100 100" width="180">
 <style>
  .dot { cx:95; cy:50; r:5 }
 </style>
    <circle cx="50" cy="50" r="45" stroke="red" fill="none" />
    <circle  fill="red"    transform="rotate(  0 50 50)" />
    <circle  fill="yellow" transform="rotate( 45 50 50)" />
    <circle  fill="blue"   transform="rotate( 90 50 50)" >
      <animateTransform
        attributeName="transform" attributeType="XML"
        type="rotate" from="0 50 50" to="360 50 50" dur="5s"
        repeatCount="indefinite" />
    </circle>
</svg>