将标签放在 SVG 路径的“中心”

2023-11-23

我正在尝试在 svg 文件的多边形上绘制标签。我面临的问题是大致找出这个多边形的中心来放置标签,因为路径的坐标是 svg 格式并且需要解析。有没有更简单的方法来确定 svg 多边形的中心(也许有人可以指出 javascript 库或片段)?我正在使用 Raphael javascript 库来操作 svg,但它似乎并没有超出标准 svg 功能。


您可以尝试以下近似方法,基于 SVG DOM 方法执行类似于多边形建议的操作:

var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
  var pt = pathelm.getPointAtLength(dist);
  addToAverage(pt.x, pt.y);
}

我认为最简单的方法是使用路径元素边界框的中心(pathelm.getBBox()),这比多边形建议更简单。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将标签放在 SVG 路径的“中心” 的相关文章

  • 在 Java 中使用 Batik 检查和删除 SVG 中的属性

    这个问题基本上说明了一切 如何检查 SVG 是否具有 viewBox 属性 我正在使用蜡染库 我需要这个 因为我需要 至少 通知用户有一个 viewBox 属性 我可以删除它吗 使用 org w3c dom 类 您可以按照以下方式做一些事情
  • 为 iOS 应用程序加载基于 SVG 的图像资源

    我从 thenounproject 购买了一个图标作为 SVG 图像 然后我使用一个名为的 macOS 程序Gapplin http gapplin wolfrosch com 将此 SVG 导出为 PNG 图像 它显示为 100x100
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 有没有办法将 SWF 转换为 SVG 格式?

    有没有办法将 FLA 或 SWF 转换为 SVG 格式 它可以是一个软件吗 或者甚至是网络转换器 我尝试了一些方法 但没有一个有效 所有这些似乎都已经过时了 不 SWF 支持的功能太多 而 SVG 格式无法创建有效的 SWF 版本 如果您只
  • 沿着预定路径移动图像?

    是否可以通过按下 iphone SDK 中的按钮来将图像设置为沿着预定路径运动 我不是在寻找任何奇特的东西 我正在研究一个简单的概念 但这会节省大量动画工作 是的 您可以通过创建一个路径来为任何 CALayer 制作动画CAKeyframe
  • WPF - 路径几何...有没有办法绑定数据属性?

    我有一个ControlTemplate作为 气泡 弹出窗口AdornerLayer给定的控制 它工作正常 但我需要能够计算它应该显示的位置 中间 底部 代替
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 如何在“object”标签内选择 SVG?

    HTML 页面的内容如下所示 方法如下script js looks var tooltip d3 select body append div style position absolute sty
  • python sys.path 故障排除

    python 文档位于http docs python org library sys html http docs python org library sys html比如说sys path is 从环境变量 PYTHONPATH 以及
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • 从子域中的 ../ 路径

    假设我创建了一个子域 http subdomain mydomain com http subdomain mydomain com 最初是在这个网址 http mydomain com subfolder folder http mydo
  • 计算移动的球与移动的线/多边形碰撞的时间(2D)

    我有一个多边形 里面有一个移动的球 如果球撞到边界 它应该反弹回来 My current solution I split the polygon in lines and calculate when the ball hits the
  • 使用 Google Maps API 旋转 SVG 符号以匹配飞机航向

    我一直在尝试旋转 Google Maps API SVG 飞机符号 以便每次符号移动时都能显示飞机的正确航向 它最初加载时显示正确的标题 我似乎不知道如何将其更新为新标题 我花了两天的时间尝试 但非常失败 我想我可以通过添加来简单地改变它r
  • 快速计算三角形与单位正方形的交面积

    在我当前的项目中 我需要计算无限网格中三角形和单位正方形的交集面积 对于每个三角形 由三对浮点数给出 我需要知道面积 在区间内 0 1 它与它相交的每个正方形都有共同点 现在我将两者 三角形和正方形 转换为多边形并使用Sutherland
  • 使用 SkiaSharp 在 Xamarin 中加载 SVG 文件

    从版本 1 55 0 开始 SkiaSharp 支持读取 SVG 文件 该软件包已于几天前发布 2016 年 11 月 10 日 但我找不到足够的有关如何使用它的文档 需要以下包 SkiaSharp 1 55 0 SkiaSharp 视图和
  • SVG - 可以在一侧添加笔画破折号渐变或透明形式

    我创建了一个 SVG 动画 在其中允许中风虚线阵列移动 我是否可以在中风破折号数组的尾部添加渐变并保持一侧透明 如示例中所示 svg main width 700px margin 30px auto position relative s
  • innerHTML 未写入 svg 组 Firefox 和 IE

    我正在做一个项目 遇到了障碍 在 Chrome 中 它按预期工作 但在 Firefox 和 IE 中则不然 下面的代码实际上只是真实项目代码的非常简化的版本 基本上我正在尝试替换 svg 的每组中的圆圈 因此 我从预编码的圆圈开始 然后删除
  • 使 D3 响应式:viewBox 与 resize()?

    我必须构建在平板电脑 桌面显示器以及某些情况下非常大的 4k 高分辨率影院尺寸显示器上都能正常运行的 d3 可视化效果 因此 我试图找出使用 SVG 的 viewBox 属性和 preserveaspectratio 与调用调整大小函数以在
  • 获取SVG绘图的边界框

    我想提取 SVG 绘图的边界框 由于 Python 已经在系统上可用并且还用于执行其他任务 因此我不想使用 JavaScript 或任何其他语言 我的理解是是否可以计算单个元素的边界框 但我不知道如何计算 整个绘图的边界框只是所有元素的最小
  • 如何使用 sys.path.append 在 Python 中导入文件?

    我的桌面上有两个目录 DIR1 and DIR2其中包含以下文件 DIR1 file1 py DIR2 file2 py myfile txt 这些文件包含以下内容 file1 py import sys sys path append s

随机推荐

  • 图像选择器 flutter web 1.9

    在新的 flutter web 1 9 上寻找图像选择器 我找到了一种方法 但小于 1 9 现在已合并 不知道如何实现此目的 尝试使用 dart html 但无法发布 仅在跑步时 看来对于Flutter web 1 10 dev Unive
  • 创建自定义方法安全表达式的最佳方法

    我正在尝试创建自己的方法安全表达式 我想在其中使用 PreFilter and PostFilter注释 在搜索教程和类似问题时 我发现了两种继续进行的方法 第一个是延长DefaultMethodSecurityExpressionHand
  • ./python:加载共享库时出错:libssl.so.1.1:无法打开共享对象文件:没有这样的文件或目录

    我需要在 Ubuntu 16 04 中尝试使用 openssl 1 1 1 的 python 3 7 python 和 openssl 版本都是预发布的 遵循有关如何统计地将 openssl 链接到 python 的说明以前的帖子 我下载了
  • JavaScript 中有哪些稀疏数组的用例?

    在稀疏数组比 常规 对象更好的情况下 您可以有什么可能的编程用途 我所说的稀疏数组是指 arr Initialize arr 0 W arr 1 T arr 3 F console log arr 0 undefined true cons
  • 嵌套期货未执行

    我遇到了一个奇怪的情况 我正在摆弄CompletableFuture当运行以下代码时 我得到了意想不到的结果 public static void main String args CompletableFuture
  • 计算链表中可能循环的节点数

    问题是这样的 它来自 Sedgwick 的优秀 Java 算法 q 3 54 给定一个指向不包含空链接的单链表中节点的链接 即每个节点要么链接到其自身 要么链接到列表中的另一个节点 确定不同节点的数量 而无需修改任何节点 并且使用不超过常量
  • 使用 Plack 处理多个文件上传

    尝试使用 Plack 处理多个文件上传 My form
  • subprocess.popen 和 subprocess.run 有什么区别

    我是新来的subprocess模块和文档让我想知道两者之间有什么区别subprocess popen and subprocess run 该命令的作用有区别吗 是不是只有比较新的一个 使用哪个更好 subprocess run 在Pyth
  • 在 macOS arm64 架构上使用 x86 库和 OpenMP

    我有一台 MacBook M1 并在我的机器上安装了一个针对 x86 Intel 架构编译的库 我有一些使用 OpenMP 的源代码 我想使用 clang 编译器编译我的代码并将我的可执行文件链接到 x86 库 我可以按照说明编译没有 x8
  • Tensorflow:如何创建 Pascal VOC 风格图像

    我正在致力于在 Tensorflow 中实现语义分割网络 并且我正在尝试弄清楚如何在训练期间写出标签的摘要图像 我想以类似的风格对图像进行编码类分割注释用于 Pascal VOC 数据集 例如 假设我有一个网络 其训练批次大小为 1 有 4
  • 如何查找3个或更多连续字符?

    我正在检查密码 这些功能之一是检查输入的密码是否连续重复 我还没有代码 因为我不知道该怎么做 我找到了这个正则表达式匹配两个或多个非连续的相同字符但它只匹配重复的逗号 以下是场景 5236aaa121 重复模式 因为a连续重复3次 2312
  • 在 PHP 中使用 uasort 访问数组键

    如果有一个相当基本的uasortPHP 中的函数如下所示 uasort arr function a b if a gt b return 1 if a lt b return 1 我尝试排序的数组如下所示 1642 gt 1 9314 g
  • 如何在简单适配器中的 imageview 中显示图像?

    我正在从 JSON 数组获取数据 并且可以在文本视图中显示文本 但在显示图像时遇到问题 这是主要活动 public class test extends ListActivity url to make request private st
  • 在 Azure 逻辑应用程序中反序列化 ServiceBus 内容

    我正在尝试读取 Azure 逻辑应用程序中消息的内容正文 但没有取得太大成功 我看到很多建议都说主体是base64编码的 并建议使用以下内容进行解码 json base64ToString triggerBody ContentData T
  • 使用snakeyaml将.yml文件加载到哈希图中(导入junit库)

    我正在尝试将 opencv 的 yml 文件加载到 arrayLists 均值 投影和标签中 我已经创建了这三个数组列表 并尝试将 yml 文件中的元素解析为它们 我发现了SnakeYAML 文档 但是我没有找到正确的方法 我正在尝试使用
  • 将 T[] 转换为 T[][] 的最快方法?

    So 事实证明并非所有数组都是一样的 多维数组可以具有非零下界 例如 请参阅 Excel PIA 的 Range Value 属性object rectData myRange Value 我需要将这些数据转换为锯齿状数组 我在下面的第一次
  • 为什么增强的 GCC 6 优化器会破坏实际的 C++ 代码?

    GCC 6 有一个新的优化器功能 假设this始终不为空并基于此进行优化 值范围传播现在假设 C 成员函数的 this 指针非空 这消除了常见的空指针检查但也破坏了一些不合格的代码库 例如 Qt 5 Chromium KDevelop 作为
  • OpenCV中如何检查两个矩阵是否相同

    我有两个 cv Mat 实例 m1 和 m2 它们具有相同的数字类型和大小 OpenCV 中是否有任何函数可以返回矩阵是否相同 具有所有相同的值 正如 Acme 提到的 您可以使用cv compare尽管它并不像您希望的那么干净 在下面的示
  • jQuery 多 ID 选择器

    这是我的代码开头的片段 var myUpload upload link upload bla bla bla 基本上我想做的是用几个不同的 ID 进行相同的调用 我本以为这会起作用 但事实并非如此 var myUpload upload
  • 将标签放在 SVG 路径的“中心”

    我正在尝试在 svg 文件的多边形上绘制标签 我面临的问题是大致找出这个多边形的中心来放置标签 因为路径的坐标是 svg 格式并且需要解析 有没有更简单的方法来确定 svg 多边形的中心 也许有人可以指出 javascript 库或片段 我