时间戳

首页 > 解决方案 > 使用 SVG 的“圆形”菜单

javascript - 使用 SVG 的“圆形”菜单

问题描述

我想做一个带有可变（未知）数量的元素的圆形菜单，也就是说，我的链接将被放置在一个圆圈上。

我想用SVG画圆，但是如何在圆上等距离放置项目呢？

我可以从代码开始：

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

随着容器大小的调整，圆圈应该调整大小，并且项目应该移动。

有没有办法在没有很多 JS 的情况下做到这一点？

标签： javascripthtmlcsssvg

解决方案

您可以在循环路径上使用文本：

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>

推荐阅读