“圆形"使用SVG的菜单 [英] "Circular" menu using SVG
本文介绍了“圆形"使用SVG的菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想做一个圆形菜单,其中包含可变(未知)个元素,也就是说,我的链接将放置在一个圆上.
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.
我想用 SVG 画圆,但是如何在圆上等距处放置物品?
I thought use the SVG to draw the circle, but how to dispose the items on the equal distance on the circle?
我可以从代码开始:
.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.
有没有很多JS的方法吗?
Is there a way to do it without a lot of JS?
推荐答案
您可以在循环路径上使用文本:
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>
这篇关于“圆形"使用SVG的菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文