在两点之间创建 svg 弧

2024-01-13

我想要connect使用圆弧绘制两个 SVG 点(例如两个圆的中心)。如果只有一个连接,则行 (<path>)将是直的。如果有两个连接,则两者都将是圆形的并且是对称的,这样:

所以,事实上,有一些规则:

  1. 一切都应该与连接两点的假想线对称。
  2. 由1可知,如果连接数为:

    • 奇怪:我们不显示直线
    • Even:我们显示直线
  3. 应该有一个值k它定义了相同点之间的两个连接之间的距离。

  4. 通过椭圆弧中间的切线应与连接两点的直线平行。显然,线的中间将垂直于切线。

我正在努力寻找一个公式来计算A中的参数<path>元素。

到目前为止我所做的是:

<path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent"/>
  • M100 100很清楚:这是起点(移动到 100,100)
  • 最后两个数字也很清楚。路径结束于300,100
  • 我还看到,如果我把0代替20,我得到一条直线。
  • 如果我更换1,0 with 1,1,路径被翻转。

我不知道如何计算A参数。我读the docs http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands,但我仍然不清楚想象。如何计算这些值?

svg {
  width: 100%;
  height: 100%;
  position: absolute;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <?xml version="1.0" standalone="no" ?>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <!-- Connect A(100,100) with B(300, 100) -->
      <path d="M100 100, A50,0 0 1,0 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 0 1,1 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,30 0 1,0 300,100" stroke="black" fill="transparent" />
      <path d="M100 100, A50,30 0 1,1 300,100" stroke="black" fill="transparent" />
      
      <!-- A(100, 100) B(300, 400) -->
      <path d="M100 100, A50,0 57 1,0 300,400" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 57 1,0 300,400" stroke="black" fill="transparent" />
      <path d="M100 100, A50,20 57 1,1 300,400" stroke="black" fill="transparent" />
  </svg>
</body>

</html>

我正在使用 SVG.js 创建路径。


由于需要圆弧,您的生活变得非常困难。

如果你使用二次曲线,那么几何形状就会变得非常简单——只需将中心 X 坐标偏移 Y 坐标差值的一半,反之亦然。

function arc_links(dwg,x1,y1,x2,y2,n,k) {
  var cx = (x1+x2)/2;
  var cy = (y1+y2)/2;
  var dx = (x2-x1)/2;
  var dy = (y2-y1)/2;
  var i;
  for (i=0; i<n; i++) {
    if (i==(n-1)/2) {
      dwg.line(x1,y1,x2,y2).stroke({width:1}).fill('none');
    }
    else {
      dd = Math.sqrt(dx*dx+dy*dy);
      ex = cx + dy/dd * k * (i-(n-1)/2);
      ey = cy - dx/dd * k * (i-(n-1)/2);
      dwg.path("M"+x1+" "+y1+"Q"+ex+" "+ey+" "+x2+" "+y2).stroke({width:1}).fill('none');
    }
  }
}

function create_svg() {
  var draw = SVG('drawing').size(300, 300);
  arc_links(draw,50,50,250,50,2,40);
  arc_links(draw,250,50,250,250,3,40);
  arc_links(draw,250,250,50,250,4,40);
  arc_links(draw,50,250,50,50,5,40);
  draw.circle(50).move(25,25).fill('#fff').stroke({width:1});
  draw.circle(50).move(225,25).fill('#fff').stroke({width:1});
  draw.circle(50).move(225,225).fill('#fff').stroke({width:1});
  draw.circle(50).move(25,225).fill('#fff').stroke({width:1});
}

create_svg();
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></script>
<div id="drawing"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在两点之间创建 svg 弧 的相关文章

  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 镀铬中的 SVG 条带

    I am using a svg file to produce a smooth gradient when I noticed some serious banding issues in Google Chrome 20 Even s
  • 如何使对象“a == b”的比较成立? [复制]

    这个问题在这里已经有答案了 这是面试前 JavaScript 在线测试的问题之一 function F var a new F var b new F Q 如何进行比较a b to be true e g console log a b t
  • 在承诺中运行同步函数

    我是 JS 和异步操作的新手 在使用express的nodeJS路由器中 我使用mongoose从mongo聚合了一些数据 该数据是每隔 15 分钟从不同站点收集的天气数据 我使用猫鼬聚合管道处理数据 以获取每小时数据并按每个站点进行分组
  • 每次用户在地址栏中按 Enter 时,Firefox 插件都会执行某些操作

    我正在尝试编写一个扩展程序 用于监视每次有人在使用地址栏时按下回车键时的情况 步骤将类似于 用户在地址栏中输入一堆文本并按 Enter 键 我的插件启动并接收用户输入的内容 然后我的插件决定如何处理用户输入的字符串 我通过使用在步骤 2 中
  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • 使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

    有没有一个只用CSS来解决这个问题的方法 我希望能够在 SVG 之后淡入 div 但前提是用户将鼠标悬停在 SVG 多边形上 代码看起来像这样
  • Javascript 3d 绘图实用程序? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道有什么好的 javascript 3d 绘图实用程序吗 我知道每个网站都推荐过画布 3d 图
  • 在 Jest 测试中设置时刻时区

    我有 util 函数 它以特定的日期格式解析给定的日期 即 2019 01 28 然后使用momentJS检索当天的开始并将其转换为 ISO 日期格式 dates js import moment from moment export co
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • 在浏览器中打开的 .mhtml 文件中填写输入

    我想对 mhtml 文件运行 e2e 测试 即填写表格 在 mhtml 文件上查看和提取数据效果非常好 但我无法填写任何内容input字段 既不是手动也不是通过木偶操作者 你可以用这个试试 mhtml 文件 https gist githu
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • 查找 JavaScript 中函数参数的数量[重复]

    这个问题在这里已经有答案了 可能的重复 获取函数的元数 https stackoverflow com questions 4848149 get a functions arity 假设我有 function a x function b
  • Javascript 警报/消息框中的欧元符号或其他实体

    有谁知道我如何在 javascript 警报窗口中显示欧元或其他 html 实体 alert u20AC HTML 实体字符查找 http leftlogic com lounge articles entity lookup
  • Cypress.io 如何处理异步代码

    我正在将旧的水豚测试转移到 cypress io 因为我们的应用程序正在采用 SPA 方式 在我们的案例中 我们有超过 2000 个测试 涵盖了很多功能 因此 测试功能的常见模式是让用户创建并发布报价 一开始我写了 cypress 浏览页面
  • 出于安全目的,您是否有理由不执行自己的算法来打乱 ID?

    我计划实现我自己的非常简单的 哈希 公式 为具有多个用户的应用程序添加一层安全性 我目前的计划如下 用户创建一个帐户 此时后端会生成一个 ID ID 通过公式运行 假设 ID 57 8926 36 7 或同样随机的东西 然后 我将新的用户
  • 如何使用 Typescript 设置 Material-UI for React?

    我在将 Material UI 添加到我的 React 项目中时遇到了一些问题 该项目是用 Typescript 编程的 根据教程 我首先添加react tab event plugin import injectTapEventPlugi
  • jQuery 倒计时插件 - 只显示非零周期

    我正在使用 jQuery 倒计时插件编写倒计时 我只希望它显示活动 非零 周期 例如代替 剩余时间 0 天 0 小时 13 分 20 秒 它应该只显示 13 分 20 秒 我的代码是 countdown countdown expiryUr
  • 如何在画布中旋转图表同时保持数字垂直?

    我正在尝试围绕其中心旋转画布中的图表 同时保持字母直立 我正在尝试使用 ctx rotate 但它使用画布的左侧作为中心来旋转整个图表 以下链接提供了视觉效果 我希望它看起来像绿色 而不是红色 就像我的代码当前所做的那样 视觉解释 http
  • 使用 JQueryUI Autocomplete 和 Meteor 的规范方法

    使用 Meteor 我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法 我有两个工作提案 想听听关于差异的意见 以及是否有更好的方法来做同样的事情 使用发布 订阅 Server Meteor publish auto

随机推荐

  • 使用 GAE 限制对静态文件的访问

    我有一个静态文件 我不想公开该文件 有没有办法限制 app yaml 的访问 使其只能由自己的域加载 基于 web2py 的解决方案也很受欢迎 因为我在 GAE 之上使用它 Thanks 您可以使用 登录 必需 来限制对其的访问 以要求使用
  • RuntimeError: 维度超出范围(预期在 [-1, 0] 范围内,但得到 1)

    我使用 Pytorch Unet 模型 将图像作为输入 同时将标签作为输入图像掩码 并在其上训练数据集 我从其他地方获得的 Unet 模型 我使用交叉熵损失作为损失函数 但我得到了这个维度超出范围的错误 RuntimeError Trace
  • 为什么无法从 Excel 互操作中设置强制转换对象?

    尝试获取对工作表的引用 使用 Excel 互操作 Excel Application xl new Excel ApplicationClass Excel Workbooks xlWorkBooks xl Workbooks Excel
  • Cytoscape.js - 将核心背景设置为深色?

    我正在尝试将边缘渲染为白色 因此希望在 cytoscape js 视口中使用黑色背景 我尝试修改 div 上的 cssid cy 但这似乎被覆盖了 在文档中 我只能找到在导出到图像时设置背景颜色的功能 例如cy jpg 但这不是我想要的 我
  • (未使用的)GLSL 制服/输入/输出是否有助于调节压力?

    我不知道制服在记忆中是如何表示的 制服似乎会占用宝贵的寄存器空间 但它们最终会传入 通过 传出到全局内存中 对吧 制服未使用后情况会发生变化吗 编译器可以优化它们吗 在这种情况下 我作为绑定位置变得无效 1 所以我假设是的 制服以 GLSL
  • gnu ld 链接整个目标文件还是仅链接所需的函数?

    我们有一个库和一个可执行文件 那就是静态地链接到库 我们希望最小化最终可执行文件的程序空间 根据 avr libc 的文档 链接器链接该函数所在的整个对象模块 http www nongnu org avr libc user manual
  • 提高 mysql LOAD DATA / mysqlimport 的性能?

    我正在批处理CSV15GB 30mio 行 成mysql 8数据库 问题 任务大约需要 20 分钟 吞吐量约为 15 20 MB s 而硬盘能够以 150 MB s 的速度传输文件 我有一个 20GB 的 RAM 磁盘 用于保存我的 csv
  • Automake - 安装版本“automake-1.14.1”时遇到困难

    我在 Rapbian 2014 09 09 wheezy raspbian 发行版上安装 automake 1 14 1 时遇到问题 我写sh configure然后我写了make然后终端写信给我 make CDPATH ZSH VERSI
  • 删除 Unix 文件中的 ^@ 字符

    我有一个关于删除不可见字符的问题 这些字符只有当我们尝试使用 vi 命令查看文件时才能看到 我们有一个由 Datastage 应用程序生成的文件 源是 DB2 表 gt 目标是 txt 文件 文件包含不同数据类型的数据 我遇到的问题是只有
  • 更改 Java 临时 Internet 文件存储位置

    我正在尝试更改 Java Web Start 的存储位置 我读到可以通过java控制面板更改位置 我到达那里 我可以看到 临时互联网文件 的路径 但 更改 按钮是灰色的 为什么我不能改变这条路径 我需要将其更改为另一个硬盘驱动器 I goo
  • dplyr::mutate 的并行版本是什么?

    鉴于我有一个非常大的数据框 请告知R中是否有一个函数可以使dplyr mutate并行多核运行 Like furrr包 你可以在其中设置plan并运行多核 None
  • Laravel 缓存获取所有带标签的项目

    在 Laravel 中 您可以使用以下标签将项目放入缓存中 Cache tags bans gt put result gt ip result gt reason 但我似乎无法找到一种方法来获取带有特定标签的所有项目 是否可以检索带有特定
  • 在此特定示例中如何将 Javascript 变量传递给 Twig

    以下代码在我的Twig模板 它用于加载CSS文件或其他文件 具体取决于用户选择的主题 这在一个简单的HTML页面但是当我尝试将其带到Twig我的模板Symfony应用程序我找不到通过的方法CSS路线 与Twig 到Javascript do
  • 如何在android studio中仅允许特定指纹

    我正在构建一个应用程序 我只想允许每个设备使用特定的指纹 指纹是原始的 真实的 有没有什么方法可以实现这个想法 也许可以转换成一个数字 我可以将其存储在数据库中并在需要时进行匹配 关于你的问题有几点 您可以使用根据设备中当前注册的指纹生成的
  • POST/GET 变量命名规则?

    在命名表单中的 POST 变量或查询字符串中的 GET 变量时 是否需要遵循任何规则 Thanks 从字面上回答这个问题 我所知道的命名确实没有 规则 POST and GETphp ini 中的数组键它是一个像其他数组一样的数组 看一眼键
  • 从州-县字符变量中提取州和县

    我在单个字符串变量中有州和县名称州 县 我想将它们分开以创建两个不同的变量 states and county 有些州有两个 甚至三个 单词 县也是如此 gt states county names df states county 1 C
  • 在 Google AppEngine 中检索 .txt 文件内容

    我正在尝试使用以下命令上传文本文件
  • 如何在asp.net core中修改HttpContext.Request.Form

    我有一个 HttpContext Request 对象 其表单中的数据是错误的 我想修复它并发送正确的 HttpContext HttpContext Request Form 是只读的 但如果不是 我就会简单地执行以下操作 HttpCon
  • Ionic 应用程序 - Cordova - Safari 调试不起作用

    过去 我能够在 iPhone 上运行 Ionic Cordova 应用程序并将其插入 Mac 然后在 Mac 上打开 Safari 并转到 Develop gt PHONE NAME gt localhost 来检查我的应用程序 目前 当我
  • 在两点之间创建 svg 弧

    我想要connect使用圆弧绘制两个 SVG 点 例如两个圆的中心 如果只有一个连接 则行