"Circular" menu using SVG [duplicate]

Question

I would like to do a circular menu, with a variable (unknown) number of elements, that is, my links would be disposed on a circle.

I thought use the SVG to draw the circle, but how to dispose the items on the equal distance on the circle?

I could start with the code:

.container {border: 1px solid red; background: lightblue;}

<figure>
  <figcaption>Inline, auto size</figcaption>
  <div class="container">
    <svg viewBox="0 0 10 10"><use xlink:href="#my-circle"/></svg>
    <div>one</div>
    <div>two</div>
    <div>tree</div>
  </div>
</figure>
<svg>
  <symbol id="my-circle" >
    <g fill="transparent" stroke="darkgoldenrod" stroke-width="0.1">
      <circle r="3" transform="translate(5,5)" />
    </g>
  </symbol>
</svg>

The circle should resize as the container is resized, and items should move.

Is there a way to do it without a lot of JS?

Smirch

And how are menu items supposed to be aligned? Can you create example image? There are plenty of circular menu examples using CSS. Like here - freefrontend.com/css-menu/#circular-menu – Dissonant

There's also the pure css option if you wanted to expand on it in other ways. – Contradiction

the problem I have an unknown (variable) number of elements, so I need a universal way of doing it, the "duplicate" question does not address this question, I wouldn't also use a complex JS logic to dynamically move the elements, I thing SVG could do it much simpler – Smirch

Answer 1

You may use text on a circular path:

svg{border:1px solid}
a:hover{fill:red; }

<svg viewBox="0 0 200 200">
<defs>
   <desc>The path used for the text</desc>
   <path id="c" d="M150,100 A50,50 0 1 1 150,99.99z"  />
</defs>

<use xlink:href="#c" stroke="#d9d9d9" fill="none"/>

     <text font-size="20" >
      <textPath xlink:href="#c" startOffset="50%">
            <a xlink:href="https://stackoverflow.com">stack</a>
      </textPath>
  </text>
  
  <text font-size="20" text-anchor="middle">
      <textPath xlink:href="#c" startOffset="75%">
            <a xlink:href="https://stackoverflow.com">over</a>
      </textPath>
  </text>
  
  <text font-size="20" text-anchor="end">
      <textPath xlink:href="#c" startOffset="100%">
            <a xlink:href="https://stackoverflow.com">flow</a>
      </textPath>
  </text>

</svg>

Hangbird

is there a way to keep the text horizontal? – Smirch

i would like to see the circle as well – Smirch

Is the <path id="c">in the <defs>. To see it you may either remove the <defs> around the path or <use> it. I've updated my answer by adding a <use> element for the circle. – Hangbird

I need that the menu cover all the circle, and the text be easy readable... so probably better to make it horizontal? – Smirch

thanks a lot, I will ask another question how to make little dots in the text anchor and also make it hirozontal ;) – Smirch

here is the question, for info https://mcmap.net/q/245272/-horizontal-text-in-a-circular-svg-menu/961631 – Smirch