如何将菜单项放置在弧形栏上?

2024-03-03

我的客户想要一个弯曲的菜单。我该怎么做?菜单项位于红色方块中,它们应该大致位于粉色方块所在的位置(在蓝色条上)。

我应该以某种方式将它们放置在 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(使用前将#替换为@)

如何将菜单项放置在弧形栏上? 的相关文章

  • 理解 z-index:该元素如何出现在其父级同级元素的前面?

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 在 Eloquent 中定义自定义属性

    我的数据库中有 3 个不同的字段 city state country 如何在 Eloquent 中定义另一个属性以从这 3 个字段返回一个字符串 第一种方法 但不起作用 protected address public function
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • OSX 惯性滚动导致 mousewheel.js 通过最轻微的滚动运动注册多个鼠标滚轮事件

    我正在开发一个非常标准的 Flexslider 实例 柔性滑块 http flexslider woothemes com 与jquery mousewheel js https github com brandonaaron jquery
  • 使用 subversion 将更改提交到与当前签出分支不同的分支

    我一直在处理从开发线检出的代码 发现所做的更改可能是破坏性更改 需要在提交到主开发树之前移动到实验分支 但是 我没有签出实验分支 并且我不想丢失已经进行的更改 有没有办法将工作文件夹中的更改提交到与最初签出的分支不同的分支 您应该从已知的分
  • Three.js中是否有一个容器类型对象来转换一组孩子?

    Three js 中是否有一个容器或节点对象 可以将多个网格添加为子对象 以便它们可以一起转换 一个不可见的容器 允许对组中的所有子对象执行转换 thanks Example http mrdoob github com three js
  • 在单个查询中将行插入到多个表中,从涉及的表中进行选择

    我有两个以下形式的表 即 每个 foo 都链接到一个栏 CREATE TABLE foo id INTEGER PRIMARY KEY x INTEGER NOT NULL y INTEGER NOT NULL bar id INTEGER
  • 如何用下划线模板显示JS对象?

    我想使用下划线模板显示 JS 数据对象 我似乎无法弄清楚如何钻取对象以获取国家 地区名称或其他日期 例如 tarrifType 并使用我的模板显示它 该物体看起来像这样 var items country China tarrifType
  • 如何在 AngularJS 中使用 Web Worker?

    我在用着AngularJS 种子 https github com angular angular seed我想看看 Web Worker 的有效实现 我想让一个简单的 Web Worker 工作以便理解它 但我遇到了功能问题 我的 Web
  • 如何以编程方式从后台恢复 Android Activity

    情况 假设我当前正在启动应用程序 Activity A 一段时间后 我按下 主页 按钮 应用程序 A 进入后台 此时 我开始使用另一个应用程序 B 例如 youtube 等 当前最小化到后台的应用程序 A 中发生了一些事情 在这种情况下发生
  • 如何在 Google 搜索 iframe 上设置自定义宽度?

    我正在尝试使用谷歌搜索我的网站 http www houseofhawkins com search php http www houseofhawkins com search php 它在某些屏幕分辨率下表现不佳 这是谷歌给出的代码 d
  • 编排微服务

    编排微服务的标准模式是什么 如果一个微服务只知道自己的领域 但有一个数据流需要多个服务以某种方式交互 那么该怎么做呢 假设我们有这样的东西 开具发票 Shipment 为了便于论证 我们假设订单发货后 就应该创建发票 在某个地方 有人按下了
  • VBA Excel 的比率条件要求

    我有一个财务数据 表明项目的健康状况 并根据差异填充颜色和字母来指示健康状况 例如 如果方差小于 5 则用字母 G 填充绿色 大于 5 但小于 20 则填充 Y 大于 20 R 我已经使用 if 语句来实现这一点 但是我需要填充整个项目的颜
  • bazel是否支持不同平台上的远程执行?

    具体来说 我想从 Mac 主机对 Windows 工作线程运行测试 评论在不同的机器上运行 bazel 远程执行器测试 https stackoverflow com questions 44354378 running bazel rem
  • 替换包装食谱中的模板

    我正在尝试为以下内容写一本包装食谱厨师石墨回购 https github com hw cookbooks graphite 在配方carbon rb中 出现以下几行 template node graphite base dir conf
  • 使用默认文本反应本机 iOS 打开消息应用程序

    Code Linking openURL sms number body Hi 我尝试使用手机号码和内容打开消息应用程序 但是手机号码和内容合并到一个部分中 如何解决此问题 将提供任何帮助 提前致谢 iOS 上的工作语法 截至 11 2 似
  • 2012年如何在Linux上设置googletest?

    我使用的是Linux机器 我已经从以下位置下载了 googletest 包here http code google com p googletest downloads detail name gtest 1 6 0 zip 但是 没有安
  • 由于依赖性问题,离子启动失败

    我刚刚安装了 Ionic npm install g ionic cli 当我尝试跑步时 ionic start ionic test app 初始化失败并出现 npm 依赖错误 关于名为 postcss 的包的错误版本的问题 ionic
  • https://www.googleapis.com/games/v1/players/xxxxx LibGDX And​​roid 出现意外响应代码 403

    我正在使用 LibGDX 制作 Android 游戏 我想使用 Google Play 游戏服务 API 但我无法让它工作 当我尝试登录时会发生以下情况 06 12 20 08 47 745 E Volley 4046 253 tk a U
  • 尝试静态链接 Boost

    我正在 Linux Eclipse CDT g 和 Boost 库中工作 对于使用 Boost 线程的现有程序 我尝试静态链接它而不是动态链接它 usr local lib 目录包含以下文件 libbost thread a libbost
  • JS 三元运算符混淆

    我现在正在学习三元运算符 我已经掌握了基础知识 但后来我看到了这个片段 它对我来说没有任何意义 谁能解释一下它是如何组合在一起的 b m 4 c 2 63 lt a 77 gt a a 65 48 lt a 57 gt a a 48 c 1
  • 结构体数组

    在不知道数组中最终存储的结构数量的情况下 如何在 C 中创建结构数组 我想在 for 循环中循环 创建一个 tempStruct 设置其变量 将其添加到数组中 然后再次循环 创建一个新的 tempStruct 并将其添加到数组中 当我试图与
  • 如何将菜单项放置在弧形栏上?

    我的客户想要一个弯曲的菜单 我该怎么做 菜单项位于红色方块中 它们应该大致位于粉色方块所在的位置 在蓝色条上 我应该以某种方式将它们放置在 SVG 中 还是将 SVG 与背景图像结合起来 并使用 Flexbox 等定位菜单项 而且它还应该对