程序员经验分享-hwhale

如何获取变换/旋转的 SVG 路径点

2024-01-03

我通过设置属性 transform="rotate(45)" 旋转了 SVG 路径元素

现在我如何获得旋转的 SVG 路径点？

当我检查属性“d”时，它仍然显示原始点[未旋转]。


如果您通过 path.getPointAtLength() 获得点，则需要将路径的转换应用于结果。您可以通过以下方式获得总变换：

var t = path.getTransformToElement( path.ownerSVGElement );
var abspoint = path.getPointAtLength( 0.5 ).matrixTransform( t );

我没有测试过这个，但这可能就是这样......

这对于路径上的某些点来说是有好处的。如果整个路径数据列表应转换为绝对路径数据，那么拉斐尔可能是最快的解决方案......

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

SVG

jquerysvg

如何获取变换/旋转的 SVG 路径点 的相关文章

  • IE11 元元素破坏 SVG

    我已将 SVG 文件数据直接嵌入到我的 html 中 它在 Chrome 和 Firefox 中显示 但在 IE11 中根本不显示 SVG 的 Pastebin 链接是http pastebin com eZpLXFfD http past

  • SVG 捕获鼠标坐标

    我知道之前已经有人问过有关 svg 鼠标坐标的问题 但我对我当前遇到的行为感到非常困惑 而且似乎没有一个线程能够解决它 我用于捕获坐标的方法 var pt svg createSVGPoint Created once for docume

  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr

  • 使用 PHP 将 SVG 图像转换为 PNG

    我正在开发一个网络项目 该项目涉及动态生成的美国地图 根据一组数据为不同的州着色 这个 SVG 文件为我提供了一张很好的美国空白地图 并且很容易更改每个州的颜色 困难在于 IE 浏览器不支持 SVG 因此为了让我使用 svg 提供的便捷语法

  • 自定义 SVG 未加载到我的图像标签中

    目前我正在尝试将自定义 svg 组件加载到图像标签内 但由于某种原因 我无法看到地图组件内的 svg 图像 我的自定义 SVG 文件如下所示 我在 SVG 中加载另一个图像

  • WordPress 包含 SVG 文件错误

    我使用 PHP 和 WordPress 在本地主机上 我可以毫无问题地包含 SVG 文件 但在实时服务器上 我尝试包含一个 SVG 文件以便能够使用 CSS 对其进行样式设置 我收到此错误消息 Parse error syntax erro

  • 无法更改 SVG 元素的类名

    我想通过单击按钮来更改应用于 SVG 的类 代码是here http jsfiddle net p19rnmev 我的 SVG 看起来像

  • 将整个网页设计为 SVG 文件

    免责声明 我意识到鉴于标题的荒谬 这听起来像一个巨魔 然而 这是一个真正的问题 我的背景涉及OpenGL x86 汇编 我最近开始学习网络编程 我真的很喜欢 SVG CSS 并且想知道 为什么人们不使用 SVG 设计整个网页 Context

  • 如何在“object”标签内选择 SVG？

    HTML 页面的内容如下所示 方法如下script js looks var tooltip d3 select body append div style position absolute sty

  • 使用 librsvg / rsvg 通过 ImageMagick 转换 SVG 图像

    我知道这个问题在这里有几个答案版本 如下所示 ImageMagick 将 SVG 转换为 PNG 无法在启用 RSVG 的情况下工作 https stackoverflow com questions 11592085 imagemagic

  • 如何按比例缩放 SVG

    我已从 Illustrator 导出 SVG 并希望设置 SVG 的高度并按比例设置宽度比例 这是 SVG 示例

  • 获取现有 SVG 元素的属性并使用 d3.js 绑定为数据

    我有一个现有的 svg 元素 例如

  • innerHTML 未写入 svg 组 Firefox 和 IE

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

  • SVG 内部跨度与文本不在同一行

    我在一个跨度内有一个 SVG 文件 同时包含文本 文本和 SVG 的高度相同 但是 SVG 与文本不在同一行 相关jsfiddle https jsfiddle net tcrnjd53 https jsfiddle net tcrnjd5

  • D3js 从数组而不是文件中获取数据

    我发现了这个优秀的 d3js 图表here http bl ocks org Caged 6476579 但就我而言 我希望此图表从数组而不是 tsv 文件中获取值 我想让它从表 中获取值 我怎样才能做到这一点 因为它使用一个函数来实现这一

  • SVG 中虚线的悬停事件

    带有线 或路径 的 SVG 使用stroke dasharray当用户将鼠标悬停在虚线的实心部分上时 似乎只会触发 CSS 和 JS 悬停事件 https codepen io anon pen YeXoZy https codepen i

  • React - 能够通过 props 控制 SVG 的填充颜色

    我有一个 SVG 这里称为 example svg 它作为组件被调用和创建 如下所示 import ReactComponent as Example from example svg import styles from index mo

  • Blazor / SVG 实时更新

    我正处于使用 Blazor 开发实时 Web 应用程序的早期阶段 目的是在网页上显示与某些设备的状态有关的实时状态更新 它是机器的 HMI 可以将其视为具有实时数据更新的仪表板 机器的图形模型将使用 SVG 完成并托管在应用程序中 我正在尝

  • 尽管 getBoundingClientRect() 是假的，但如何将事件坐标转换为 SVG 坐标？

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM

  • SVG 剪辑路径在 Safari 上不起作用

    我有一个简单的动画 从下往上填充 svg 然后淡出 填充是使用clipPath随着使用path with a stroke dasharray stroke dashoffset 问题是clipPath在 Safari 上似乎完全被忽略了

随机推荐

  • Powershell：引号解析不一致/奇怪的行为？

    全部 我正在尝试使用 PowerShell 编译程序 但该命令的解析方式很奇怪 此命令在 cmd exe 中正确执行 dmd od bin of bin convHull exe I src src concSort d src fileP

  • 如何左对齐 SWT ToolItem 中的文本？

    我正在升级 RCP 应用程序以使用 Eclipse 4 2 1 我遇到的问题之一是工具栏中文本的对齐方式发生了变化 我可以使用以下片段重现该问题 该片段改编自标准SWT 片段 http git eclipse org c platform

  • 如何在Python中重新分配列表中的项目？

    我想在 Python 中重新分配列表中的每个项目 In 20 l 1 2 3 4 5 In 21 for i in l i i 1 但名单根本没有改变 In 22 l Out 22 1 2 3 4 5 我想知道为什么会这样 任何人都可以详细

  • 网络浏览器是否需要在客户端计算机上安装 IE

    我只是想知道是否有任何版本的 I E 部署使用 webbrowser 控件的应用程序时必须安装在客户端计算机上 目标 net 2 平台 Thanks 当您使用 添加 删除 Windows 组件 小程序来 删除 Internet Explor

  • (VB6) 逐行读取文本文件查找特定单词

    下午好 StackOverflow 我刚刚在这里注册 我已经使用这个网站很多年了 它似乎总是提供答案的网站 所以我决定参与其中 废话不多说 这是我的问题 我正在为 LAN 各方编写一个 API 我和一个团队每月都会使用该 API 来帮助解决

  • 了解汇编级别 ++i 和 i++ 之间的区别

    我知道这个问题的变体已经在这里被问过多次 但我并不是在问两者之间有什么区别 只是想要一些帮助来理解这两种形式背后的组装 我认为我的问题与whys比到what的差异 我正在阅读Prata 的 C Primer Plus在处理增量运算符的部分

  • C++ select() 不等待超时时间

    我正在尝试使用 select 函数来接受输入 但如果用户没有输入任何内容 则每 2 秒执行一次其他操作 下面的代码在第一次到达 select 时等待两秒 但是一旦打印出第一个 超时 消息 它就会快速继续打印 超时 而不等待 2 秒 基本上进

  • Celery 任务在多个队列中注册

    我在 Django 1 9 中使用 celery 和 RabbitMQ 服务器 我有四个不同的队列 我正在这四个队列之一中注册一个任务 问题是我的所有任务都注册在所有四个队列中 就像我有一个名为add并有四个队列 A B C 和 D 理想情

  • 根据C++模板类型调用不同的C函数

    我的问题如下 我有一个 C 库 其中包含每个函数的多个版本 具体取决于它们所使用的数据类型 例如 void add double a double b double c and void sadd float a float b float

  • 如何设置 QComboBox 宽度以适合最大的项目？

    我有一个QComboBox我充满了QString using comboBox gt addItem someString 当我启动 GUI 应用程序时 QComboBox始终为 70 即使最小的项目要大得多 如何动态设置a的宽度QComb

  • 当我浏览 http://localhost:8004/elmah.axd 时，它会生成 404 错误

    当我浏览时http localhost 8004 elmah axd它显示应用程序中发生的错误 但也会生成 404 错误 我该如何停止这个 404 错误 404错误的详细信息是 System Web HttpException 0x8000

  • Visual Studio 2010 条件引用

    我们这里有多个产品共享一些公共库 这些库是单独解决方案的一部分 因此它们可以由TFS独立构建 但问题是在开发过程中 必须修改公共库 将其编译为二进制文件 将其复制到公共位置 编译产品解决方案 为了避免这种情况 我想知道是否可以有条件引用 因

  • 查看控制器 EXTJS 4 中的参考

    我无法在控制器中获取组合框值 组合框视图的getter方法返回 function i return this constructor apply this arguments null 而不是查看对象实例 如果我使用 var combo t

  • 未找到 QWebView 库

    当我尝试添加QWebFrame 库 我找不到它 并且答复是没有这样的文件或目录 所以知道为什么这个库不存在 我按如下方式添加库 include

  • 在 Curses 模式下，stdout 和 stderr 去哪里？

    当curses处于活动状态时 stdout和stderr去哪里 import curses sys def test streams print stdout print gt gt sys stderr stderr def curses

  • ReactJS/Express Axios POST 返回 404，来自 Postman

    我不知道我在这里做错了什么 POST 方法适用于 Postman 但不适用于 React 前端 users js api users login route POST api users login desc Login user Retu

  • 如何在不知道c中大小的情况下迭代数组[重复]

    这个问题在这里已经有答案了 我有一个指向 C 中数组的指针 我想对其进行迭代 但我不知道其大小 int array 我不确定应该如何进行 我想我应该尝试通过以下方式找到尺寸 int array size sizeof array sizeo

  • 在javascript中从剪贴板抓取部分数据

    我复制了一个大约一百万行的 Excel 表格 当我查看系统上的剪贴板时 它似乎包含大约 250MB 的数据 但是 我only需要从中获取样式信息 例如 整个数据的大小 远 不到 1MB 有没有办法像读取文件或流一样读取剪贴板 以便我可以执行

  • 时髦的 jQuery mouseleave 行为

    我有一个类似菜单的下拉容器 通过绑定 mouseleave 事件来隐藏 div div

  • 如何获取变换/旋转的 SVG 路径点

    我通过设置属性 transform rotate 45 旋转了 SVG 路径元素 现在我如何获得旋转的 SVG 路径点 当我检查属性 d 时 它仍然显示原始点 未旋转 如果您通过 path getPointAtLength 获得点 则需要将

热门标签