如何通过枢轴点旋转计算 svg 变换矩阵

2023-12-20

如果存在默认枢轴点(0,0)的 svg 旋转(度),那么我可以将旋转变换矩阵计算为

 _                    _
| cos a   -sin a   0   |
| sin a    cos a   0   |
|   0       0      1   |
 -                    -

但如果枢轴点不是 (0,0),比如说 (px,py) 那么我如何计算旋转变换矩阵?


我得到了答案,

设枢轴点为(px ,py)旋转是a degree那么净变换矩阵将是

                   _          _        _                      _    
                  |   1  0  px |      |   cos a    -sin a   0  |   
    net_matrix =  |   0  1  py |  X   |   sin a     cos a   0  |   
                  |   0  0  1  |      |     0         0     1  |   
                   -          -        -                      -    

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

如何通过枢轴点旋转计算 svg 变换矩阵 的相关文章

  • 简单 – 按顺序对多个 SVG 进行动画处理(如循环 GIF)

    我正在尝试做最基本的SVG动画 我发现的一切都试图教我关键帧和类似的高级东西 我在 After Effects 中了解关键帧 但这根本不是我需要的 我想做的就是按顺序为相同的 8 个 svg 路径设置动画 就像翻书一样 我可以在其中轻松编辑
  • 获取现有 SVG 元素的属性并使用 d3.js 绑定为数据

    我有一个现有的 svg 元素 例如
  • 高图表的分散工具提示未显示

    我有一个散点图和条形图 我无法查看酒吧上方散点的工具提示 这是小提琴http jsfiddle net tZ9Rt http jsfiddle net tZ9Rt 我正在使用这两个系列 series type scatter index 2
  • 如何进行多个 d3 窗口大小调整事件

    我有三个svg一页上的元素 每个元素都由 D3 陪伴 每个都有自己的页面调整大小逻辑 由我写的简单模块 https github com TimeMagazine d3 base让他们做出反应 问题在于 只有最后一个调整大小事件被触发 因为
  • 如何缩放 SVG 路径以适应窗口大小?

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

    我有两个方阵A and B 我必须转换B to CSR Format并确定产品C A B csr C 我在网上找到了很多关于CSR 矩阵 向量乘法 http www mathcs emory edu cheung Courses 561 S
  • 2D 矩阵上的 Numpy where()

    我有一个像这样的矩阵 t np array 1 2 3 foo 2 3 4 bar 5 6 7 hello 8 9 1 bar 我想获取行包含字符串 bar 的索引 在一维数组中 rows np where t bar 应该给我索引 0 3
  • SVG feColorMatrix 在 safari 中不起作用

    我有一个相当简单的设置 我想通过使用 svg 过滤器来改变 svg 图像的颜色
  • python中的张量点运算

    我有两个数组A 1 2 3 and B 1 0 1 0 问题是如何在 python 中执行张量点积 我期待得到 C 1 2 3 0 0 0 1 2 3 0 0 0 函数 np tensordot 返回有关数组形状的错误 对这个问题稍微补充一
  • 如何从列中创建对称矩阵?

    例如 我想转动以下列 90 175 600 650 655 660 代入矩阵 90 175 600 650 655 660 175 600 650 655 660 655 600 650 655 660 655 650 650 655 66
  • 使用路径id获取SVG路径d属性

    我有单独的 json 包含 SVG 路径 Id 有没有办法使用路径 id 获取 SVG 路径 d 属性 或者有没有办法只使用路径 ID 来填充 SVG 路径 您可以通过调用 document getElementById 来获取路径元素 然
  • 使用 CSS 更改 svg 图像的颜色 [重复]

    这个问题在这里已经有答案了 我的 html 文件中有以下 svg 图像 img class svg src my image link svg 现在 我尝试使用以下 css 代码更改颜色 svg path fill black 然而 一切都
  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe
  • 使用 Javascript 动态添加时,SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的
  • 具有轴和角度的 3D 旋转

    我知道 3D 旋转在 SO 和许多其他网站上都有详细记录 但尽管阅读了无数的解释 我仍然没有弄清楚我哪里出错了 我的背景是艺术和设计 而不是数学和编程 而且我从来都不确定我的攻击角度 没有双关语 是否正确 我没有粘贴我那令人沮丧的代码的拼凑
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • 当 SVG 是编码的 CSS 背景图像时,如何更改 SVG 颜色?

    我的 CSS 文件中编码了一个 SVG 图标 如何在悬停时更改其颜色而不具有不同颜色的重复图标 在我的 CSS 文件中 我有 background image url data image svg xml 3Csvg xmlns http
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • 如何在 NumPy 中连接两个一维数组?

    我有两个数组A a1 an and B b1 bn 我想得到新的矩阵 C 等于 a1 b1 a2 b2 an bn 我该如何使用numpy concatenate 这个怎么样 很简单但是fastest解决方案 In 73 a np arra

随机推荐

  • 按住鼠标右键移动无边框 Winform,可能使用本机方法

    我有一种情况 我想通过在窗口的客户区域上按住鼠标右键来移动窗口 正如我所说 它的形式是无边界的 我想 本地 移动它 如果可能的话 否则其他答案也可以 我的意思是当你在标题栏上按住鼠标左键时它的行为方式 通过鼠标移动和类似的事情我得到了很多奇
  • VS Code 有没有办法导入 Makefile 项目?

    正如标题所说 我可以从现有的 Makefile 自动填充 c cpp properties json 吗 Edit 对于其他尝试导入 makefile 的人 我找到了一组脚本 它们完全可以实现我想要实现的目标 即通过 VS Code 管理
  • Java与指纹识别

    有人用Java实现指纹识别系统吗 例如 它附带了适用于 linux 和 windows 平台的 java api http www griaulebiometrics com page en us manual fingerprint sd
  • 为什么 ObservableCollection 不会在项目更改时更新?

    我注意到ObservableCollection在 WPF 中 仅通过添加或删除列表中的项目来反映 GUI 中的更改 而不是通过编辑它 这意味着我必须编写自定义类 ObservableCollection 这种行为的原因是什么 Thanks
  • 强制“git merge”将所有差异声明为合并冲突

    在 git merge 中 我希望任何差异 即使通常不是合并冲突 也被视为合并冲突 然后 通过 git mergetool 我可以看到并解决每个差异 我尝试在 gitattributes 中指定 merge 但这似乎不起作用 git che
  • mysql float 返回错误值

    我有一个高精度值的表 存储为Float 当我在表中查询该值时 它返回四舍五入到第一位数字的四舍五入值 但是当我运行下面的查询时 我得到了我存储的值 SELECT MY FLOAT COL 1 FROM MY TABLE Mysql 内部发生
  • Botframework 提示对话框直到用户完成

    我正在使用 Microsoft 的 botbuilder 和 LUIS 创建一个 slack 聊天机器人 有办法继续使用吗builder Prompts text 不断询问用户是否还有用户想要输入的信息 例如for or while环形 例
  • 如何更改 Visual Studio 中的默认构建输出目录?

    在 Visual Studio 2010 到 2013 中 默认情况下 例如 当我创建新的控制台应用程序时 新解决方案将其编译的可执行文件输出到Solution name Project name bin Debug 我希望它们输出到Sol
  • 用于查找数字阶乘的递归函数

    我得到的输出为 24 这是 4 的阶乘 但我应该得到 5 阶乘的输出 即 120 include
  • 在 SQL Server 上对 rowversion/timestamp 列建立索引的后果

    与我之前关于没有中间漏洞的序列的问题相关 保证读者可见的数字始终递增 在此输入链接描述 https stackoverflow com questions 16518133 how to prevent interim identity h
  • Assembly.GetExecutingAssembly() 和 typeof(program).Assembly 之间的区别

    有什么区别Assembly GetExecutingAssembly and typeof program Assembly 假设program在执行程序集中 它们应该返回相同的值 然而 typeof program Assembly应该有
  • pyenv: python: 找不到命令

    我想将 Python3 与 pyenv 一起使用 pyenv root Users asari pyenv pyenv versions system 2 7 15 3 6 2 3 6 3 3 6 4 3 6 6 set by Users
  • 命名空间中的 S3 方法未导出

    我正在开发一个R使用 devtools document 进行打包以创建 NAMESPACE 文件 其中几个函数是用于汇总 预测 绘图 打印的 S3 方法 其中通用函数位于base or stats 我按照 Hadley 的建议使用 exp
  • 为什么要向 hashCode() 添加一个常量? [复制]

    这个问题在这里已经有答案了 我是 Java 新手 最近了解了hashCode On 关于 Java hashCode 的维基百科文章 https en wikipedia org wiki Java hashCode 有以下示例hashCo
  • Express Busboy 的文件事件未触发

    我试图让公交车男孩使用我的快速代码 但它的事件都没有触发 不存在诸如输入字段名称不匹配等愚蠢错误 Here is app js var express require express var path require path var fa
  • 正则表达式匹配文本中带或不带逗号和小数的数字

    我正在尝试查找并替换文本正文中的所有数字 我找到了一些示例正则表达式 它们几乎解决了问题 但还没有一个是完美的 我遇到的问题是文本中的数字可能有也可能没有小数和逗号 例如 这只重 5000 磅的狐狸跳过了 99 999 99998713 英
  • 如何有条件地设置模板头的编译器优化

    I found 一个有趣的问题 https stackoverflow com q 29358105 3258851 并继续尝试回答这个问题 作者希望使用 AVX 优化来编译一个源文件 依赖于模板库 而项目的其余部分则不使用 AVX 因此
  • Firebase 如何保证我的数据安全?

    我一直在看演示Firebase https www firebase com我对在线存储数据的功能和灵活性感到惊讶 还查看了 AngularJS 项目教程homepage http angularjs org 以 Firebase 作为后端
  • 特定的 C 函数如何工作?

    我正在尝试学习C 但已经很困惑了 在我使用的 OOP 语言中 存在执行方法重载的能力 其中相同的函数可以具有不同的参数类型并调用最合适的参数类型 现在在 C 中我知道情况并非如此 所以我无法弄清楚以下问题 printf 是如何工作的 例如
  • 如何通过枢轴点旋转计算 svg 变换矩阵

    如果存在默认枢轴点 0 0 的 svg 旋转 度 那么我可以将旋转变换矩阵计算为 cos a sin a 0 sin a cos a 0 0 0 1 但如果枢轴点不是 0 0 比如说 px py 那么我如何计算旋转变换矩阵 我得到了答案 设