使用SVG的“圆形”菜单
使用SVG的“圆形”菜单
提问于 2018-12-06 03:00:51
我想做一个圆形菜单，用一个变量(未知)数量的元素，也就是说，我的链接会放在一个圆圈上。
我想用的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的方法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-06 04:37:55
您可以在循环路径上使用文本：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53639068
复制相关文章
相似问题