找到svg形状的中心

2024-02-06

我在用着svgjs创造我的形状。如何找到 svg 形状的中心点并在那里添加元素?就我而言,是一个红点。我在文档中找不到任何有助于解决这种情况的方法或内容的信息。


你可以使用该方法getBBox https://docs.webplatform.org/wiki/svg/methods/getBBox或者替代地getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect。两种方法都会为您提供一个具有以下属性的对象x, y, width, height,您可以用它来计算您的中心。

既然你用标签标记了你的问题svg.js我也会给你一个解决方案svg.js https://github.com/svgdotjs/svg.js.

// Vanilla
node = document.getElementById('myEl').getBBox()

// with svg.js
SVG.adopt(document.getElementById('myEl')).bbox()

第二种解决方案返回一个对象,其中包含cx and cy已经给你算好了。

这个方法可以在docs https://github.com/svgdotjs/svg.js#bbox

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

找到svg形状的中心 的相关文章

随机推荐

  • 如何将肥皂基本身份验证请求添加到 WSDL

    我怎样才能对 WSDL 进行 Soap AUTH BASIC 身份验证 以便阅读 WSDL 的人知道我需要针对特定 方法进行该操作 使用下面的示例 我成功地将 SOAP 基本身份验证传递到另一端的 php Web 服务 PHP net So
  • PHP imageftbbox imagettftext - 简单的字母间距/字距调整?

    有谁知道使用 imagettftext 进行字母间距 字距调整的简单方法 我的脚本按照我现在的需要工作 但我确实可以使用具有 CSS 样式的生成文本 letter spacing 0 01em 所以它与页面上的标准文本相匹配 但我没有看到任
  • 如何选择列表中所有无序的元素?

    这个问题源于评论里的讨论这个答案 https stackoverflow com questions 1390832 how to sort nearly sorted array in the fastest time possible
  • 如何使用executeReader()方法检索一个单元格的值

    我需要执行以下命令并将结果传递给标签 我不知道如何使用 Reader 来做到这一点 有人可以帮我吗 String sql SELECT FROM learer WHERE learer id index SqlCommand cmd new
  • 使用 CoreData 嵌套撤消组

    我想将撤消管理器添加到 coredata 支持的 iPhone 应用程序中 当用户尝试添加新对象 通过点击 按钮 时 我加载一个新的模式视图控制器并在 viewDidLoad 中启动一个新的撤消组 当用户按下 取消 按钮时 我想回滚 can
  • 删除 Spark 数据框中重复的所有记录

    我有一个包含多列的 Spark 数据框 我想找出并删除列中具有重复值的行 其他列可能不同 我尝试使用dropDuplicates col name 但它只会删除重复的条目 但仍会在数据框中保留一条记录 我需要的是删除最初包含重复条目的所有条
  • Google 街景中像素距地面的高度/标高

    我正在寻找谷歌街景中每个像素距地面的高度 我知道可以计算的几件事是 像素间距 https stackoverflow com questions 21591462 get heading and pitch from pixels on s
  • 删除特定的kafka消息

    我想指示 kafka 尽可能删除一条消息 如果使用键和日志压缩 可以将键设置为消息 ID 并将消息内容设置为 null 但我寻找更直接的东西 不依赖于设置密钥 例如通过消息 ID None
  • 如何在 NSMenuItem 内绘制内联样式标签(或按钮)

    当 App Store 有更新时 它会在菜单项中显示一个内联样式元素 如下面屏幕截图中的 1 new 另一个我们可以看到这种菜单的地方是10 10 Yosemite的分享菜单 当您安装任何添加新共享扩展的应用程序时 共享菜单中的 更多 项目
  • AWS SSO、Codecommit(GRC git 克隆链接)和 npm install

    单点登录 SSO 在 AWS 账户上实施 运行后aws sso login 使用 GRC 链接 克隆节点和存储库是可行的 然而 运行npm install在 repo 中会导致不同的错误 前任 包 json dependencies com
  • 如何处理极长的LSTM序列长度?

    我有一些数据以非常高的速率 大约每秒数百次 采样 对于任何给定实例 这会导致平均序列长度很大 约 90 000 个样本 整个序列有一个标签 我正在尝试使用 LSTM 神经网络将新序列分类为这些标签之一 多类分类 然而 使用具有如此大序列长度
  • 如何更改浮动占位符的角度材料表单字段中的字体大小

    下面是角材料的形状场 当占位符正常和浮动时 如何为占位符添加 2 个不同的自定义字体大小 字体大小 20px 正常时 字体大小 13px 当它浮起来并变小时
  • 推送路线时将对象作为 prop 传递

    该功能位于路由器视图之外的组件中 goToMarkets this router push path markets params stock this model 但该道具在 市场 组件中未定义 Router const routes p
  • 如何使用 es6 js 类表示法自动递增 id 值?

    我在 es6 中的类方面遇到一些问题 每次创建对象时 我都需要自动递增 id 值 真的不明白我如何声明变量 为 id 赋值 然后递增增量变量 class Rectangle constructor name width height x y
  • 将报告导出为 PDF 时更改字体

    我在用着贾斯珀软件工作室 5 2 我做了一份报告快递新字体 当我将其导出到 PDF 时 它会将字体更改为Arial 我只使用Studio工具 当我预览报告时一切正常 但当我导出时就会发生这种情况 我可以如何处理我的报告以导出快递新 font
  • 在 Maxima 列表中查找最大值和索引?

    我有一个 maxima 列表 例如 x 1 3 7 98 211 3 2 44 23 我需要找到列表的最大值以及最大值位于哪个位置 我唯一想到的是将列表重写为序列并应用 max 命令 max first x second x last x
  • 具有摊销 O(1) 删除和 O(log n) 搜索的数据结构

    我需要一个支持两种操作的数据结构 删除和搜索 现在 删除操作应该运行在摊销 O 1 时间 而搜索应该运行在O log n time 搜索操作应该如下工作 查找指定的值 如果它在这里 则返回值本身 否则 返回最接近的较大值 返回有序后继 这个
  • 具有输入数组的方法

    我想要一种方法 可以像 NSArray 一样放置所需数量的参数 id initWithObjects id firstObj NS REQUIRES NIL TERMINATION 然后我可以使用 NSArray array NSArray
  • 获取 Boto3 中具有特定标签和值的 EC2 实例列表

    如何使用标签和值过滤 AWS 实例boto3 import boto3 ec2 boto3 resource ec2 client boto3 client ec2 response client describe tags Filters
  • 找到svg形状的中心

    我在用着svgjs创造我的形状 如何找到 svg 形状的中心点并在那里添加元素 就我而言 是一个红点 我在文档中找不到任何有助于解决这种情况的方法或内容的信息 你可以使用该方法getBBox https docs webplatform o