我的客户想要一个弯曲的菜单。我该怎么做?菜单项位于红色方块中,它们应该大致位于粉色方块所在的位置(在蓝色条上)。
我应该以某种方式将它们放置在 SVG 中,还是将 SVG 与背景图像结合起来,并使用 Flexbox 等定位菜单项?
而且它还应该对大约 1000px 宽度有一点响应。从那里我会将菜单转换为移动版本,我已经在其他页面上使用了该版本。
<html>
<body height="100%" width="100%">
<svg height="100%" width="100%" viewbox="0 0 100 100" preserveAspectRatio="none">
<path d="M 10 10 Q 50 50 90 50 v -40 h -80" fill="cyan" transform="scale(1.05,1.05) translate(-4.5,-.5)"/>
<path id="path" d="M 10 10 Q 50 50 90 50" fill="none" stroke="yellow"/>
<text font-size="4">
<textPath href="#path" textPath="stretch">
<tspan dx="5">Alternative1</tspan>
<tspan dx="10">Alternative2</tspan>
<tspan dx="10">Alternative3</tspan>
</textPath>
</text>
</svg>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)