程序员经验分享-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 路径点 的相关文章

  • 如何缩放 SVG 路径以适应窗口大小？

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是

  • SVG 过滤器在 Firefox 中不显示，在 Chrome 中工作正常

    我想要深色背景上的一段深色文本外面有白色的光芒 虽然默认阴影滤镜 https developer mozilla org en US docs Web CSS filter drop shadow 2在 CSS 中 比如filter dro

  • SVG feColorMatrix 在 safari 中不起作用

    我有一个相当简单的设置 我想通过使用 svg 过滤器来改变 svg 图像的颜色

  • 使用路径id获取SVG路径d属性

    我有单独的 json 包含 SVG 路径 Id 有没有办法使用路径 id 获取 SVG 路径 d 属性 或者有没有办法只使用路径 ID 来填充 SVG 路径 您可以通过调用 document getElementById 来获取路径元素 然

  • svg 圆形描边上的多种颜色

    我想创建一个彩虹圈 如下图所示 如何绘制弯曲的多色标渐变 这是我当前的代码

  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display

  • React - 在单个文件中导入多个 svgs

    我有多个 svg 文件 我想将所有这些文件导入和导出到一个文件中 icons js import IconVideoOn from assets img icons video on svg import IconVideoOff from

  • 具有宽度/高度的 SVG 在 IE9/10/11 上无法缩放

    IE 9 10 11 存在一个已知问题 如果您有一个 SVG 文件

  • 使用 classed("active",true) 鼠标悬停时 D3 颜色变化

    我是 js 和 D3 的新手 我已经生成了某种热图 并且想使用 D3 的 on mouseover 更改图块的颜色 我可以显式更改颜色 但想使用 CSS 活动规则 可能是一些简单的东西可以修复 任何帮助将不胜感激 完整代码如下 Thanks

  • 角度错误：冲突：多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每

  • 如何在 blaze-html 中渲染 blaze-svg 标记

    我想将使用 blaze svg 生成的 svg 图直接包含在使用 blaze html 生成的 html 中 两者都基于 blaze markup 所以我希望它很容易 diagram1 Svg diagram1 try1 Html try1

  • 如何制作一条带有边框的 SVG“线”？

    我有一个小 svg 小部件 其目的是显示角度列表 参见图片 现在 角度是线元素 只有描边 没有填充 但现在我想要一个 内部填充 颜色和周围的 描边 边框 我猜 line 元素无法处理这个问题 那么我应该使用什么来代替呢 请注意 线条笔划的线

  • 移动浏览器上带有阴影模糊的 SVG

    我正在努力在尽可能多的平台上制作带有阴影的 SVG 图标 我为此使用以下简单的 CSS test width 14px height 14px background image url images test svg background

  • jsPlumb：如何使流程图连接器避免元素相交？

    是否可以使 jsPlumb Flowchart 连接器不交叉可连接的项目或指定元素 在示例中 具有 item 类的元素 默认流程图行为 想要的结果 这是我尝试过的 http jsfiddle net CcfTD 1 http jsfiddl

  • 处理重叠 SVG 图层中的鼠标事件

    我正在使用 d3 js 构建地图可视化 我正在为美国各州和县绘制填充多边形 县的 SVG 图层位于州图层下方 状态已填充 但填充不透明度设置为 0 我认为 需要填充来捕获点击事件 我想捕获州级的点击事件 但我想捕获县级的鼠标悬停事件 但是

  • SVG 文本在 IE 中消失，直到我单击它

    我在 Internet Explorer Edge 以 Win7 上的为准 中遇到与 SVG 创建和操作相关的问题 在我正在开发的应用程序中 我们使用 d3 生成 SVG 形式的图形 在 Chrome 和 Firefox 中 它们工作得很好

  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在

  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

  • 将 SVG 的高度设置为行高？

    我想将我的 SVG 图像作为图标包含在标题旁边 h1 img src icon sell svg class icon Verkaufen h1 字体大小为h1 is 36px和line heigt is 1 1 我使用检查器工具发现计算出

  • 如何使用 SVG 形状进行图像裁剪？

    任何人都可以指导我如何使用 SVG 独特的形状制作 CSS 图像剪辑路径 有些人建议使用第三方插件 例如 SVG Injector 等 任何人都可以帮助我如何完成这项适用于所有浏览器的任务 我给出了一张示例图片以使其更好地理解 请检查下图

随机推荐

  • 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 获得点 则需要将

热门标签