SVG - 从窗口坐标到ViewBox坐标

2024-02-26

基本上我有一个 svg“SecondSVG”到一个 svg“FirstSVG”到一个 svg“MainSVG”。每个 svg 都有自己的 ViewBox。该页面可以由另一个页面加载到屏幕上的任何位置。
那么基本上我如何找到“SecondSVG”的 viewBox 的屏幕 x 知道这个 svg 基本上可以根据调用页面加载到任何地方? event.clientX 为自己提供屏幕的 x 坐标。如果我不知道“SecondSVG”的 ViewBox 的坐标,那么如何找到“SecondSVG”的 ViewBox 内的 x 坐标?

我使用的是 Firefox 3.6.3,并且我有一个事件对象,我可以从中提取 clientX、clientY 和其他相对于屏幕的坐标。然而我需要的是 ViewBox 内的坐标。


function click(evt)
{

var root = document.getElementById('your svg');

        var uupos = root.createSVGPoint();

        uupos.x = evt.pageX;

        uupos.y = evt.pageY;

        var ctm = evt.target.getScreenCTM();

        if (ctm = ctm.inverse())

            uupos = uupos.matrixTransform(ctm);



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

SVG - 从窗口坐标到ViewBox坐标 的相关文章

  • Express MongoDB find() 基于 _id 字段

    因此 在我的 Express 应用程序中 我尝试根据我的 id 字段查找 请参阅下面我的 MongoDB 记录 id oid 58c2a5bdf36d281631b3714a title EntertheBadJah subTitle Lo
  • 如何将文本插入摩纳哥编辑器?

    我的应用程序中嵌入了摩纳哥代码编辑器 如何以编程方式在特定行上插入文本 var editor monaco editor create document getElementById container value First line n
  • 通过 HTML 将复杂变量传递给 javascript 的正确方法

    我试图摆脱使用 PHP 的 htmlentities 但我在这里停止了 但后来我想 我不做替换和检查特殊字符 而是只 JSON 整个对象 这提供了一个非常不受欢迎的结果 其中包含大量双引号 那么我应该怎么做呢 我应该为每个图像分配一个数字唯
  • .map() Javascript ES6 地图?

    你会怎么做 本能地 我想做 var myMap new Map thing1 1 thing2 2 thing3 3 wishful ignorant thinking var newMap myMap map key value gt v
  • Firestore onSnapshot() 方法多次触发

    我有一个带有多个路由和 vuex 的 vue cli 4 应用程序 Firestore 数据库已成功连接 我的应用程序立即反映从 Firestore 控制台应用于数据库的修改 在离开包含与 Firestore 同步 的组件的路线然后返回后
  • 我可以检测焦点来源吗? (Javascript、jQuery)

    快速提问 是否可以检测焦点是来自鼠标单击还是来自焦点事件的选项卡 我想如果没有 我将不得不在同一元素上使用单击句柄来确定源 但我更喜欢通过焦点事件的方式 Thanks Gausie 可能无法 100 工作 但如果没有直接的方法 那么你不能直
  • 跨浏览器兼容音频有哪些选项?

    我正在使用这个功能 function playSound file MyAudio new Audio file MyAudio play 不幸的是 我正在努力寻找一种适用于所有浏览器的文件类型 Mp3 适用于 Chrome Safari
  • Rails:包括外部 JavaScript

    我想使用 JavaScript 库 例如 jQuery 插件 我是否使用 Rails 资产管道 或者我应该将其包含在 javascript include tag 中 我有哪些选择以及推荐的做法是什么 您会仅在几个页面上还是在整个应用程序中
  • 有没有办法防止 neDB 集合数组中的条目重复?

    var addNewUser function id chatId db update id id push users chatId function err numAffected code after the record is up
  • 我可以使用 javascript 生成 JSON 文件吗?

    我想在域 example1 com 上创建一个页面 并获取 解析另一个域 example2 com json json 上的 JSON 文件 可以使用 javascript 生成 json 文件 在 example2 com 上 吗 我认为
  • Karma 测试报告运行速度快,但实际上运行速度慢

    最好的解释是a video https youtu be Zwwi01JuPrQ 或参见下面的 gif 您会注意到 Karma 进度报告器报告测试只需要几毫秒 但显然需要相当长的时间 我在推特上提到了这一点 https twitter co
  • Mocha 测试对原生 ES6 模块的“esm”支持

    有一个很棒的帖子 使用 Mocha 和 esm 测试原生 ES 模块 https web archive org web 20220318155753 https alxgbsn co uk 2019 02 22 testing nativ
  • 传单地图显示为灰色

    我正在启动 leaflet js快速开始 http leafletjs com examples quick start html但我的地图显示为灰色 我缺少什么吗 脚本 js var leafletMap L map leafletMap
  • 如何判断CKEditor是否已加载?

    如何确定 CKEditor 是否已加载 我查看了API文档 但只能找到loaded事件 我想检查 CKEditor 是否已加载 因为如果我第二次加载它 我的文本区域就会消失 The loaded活动对我不起作用 instanceReady
  • 如何从 JavaScript 中的 URL 中提取主机?

    捕获域直到结束字符 我需要一个捕获的正则表达式example com在所有这些中 example com 3000 example com pass gas example com example com 如果您确实有有效的 URL 那么这
  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag
  • Dojo require,模块加载失败时连接错误

    当我尝试加载不存在的模块时 它失败并出现 404 错误 当然 我想处理此错误 但不知道如何连接到 错误 事件 根据 Dojo 文档 我应该能够使用它的微事件 API http livedocs dojotoolkit org loader
  • JavaScript TypedArray 混合类型

    我正在尝试使用 WebGL 并希望将一些不同类型混合到一个字节缓冲区中 我知道 TypedArrays 可以达到这个目的 但不清楚我是否可以与它们混合类型 OpenGL 顶点数据通常是与无符号字节或整数混合的浮点数 在我的测试中 我想将 2
  • 如何自动加载 Webpack 中给定目录中的所有 JSON 文件? [复制]

    这个问题在这里已经有答案了 编辑 有一个现有的问题 https stackoverflow com questions 29421409 how to load all files in a subdirectories using web
  • 根据对象内的值将对象数组分成两部分

    我一直在尝试 并努力 弄清楚如何根据键值对拆分对象数组 长话短说 我有一个火车正在停靠的车站列表 需要将之前的停靠点和未来的停靠点分开 我正在使用的数据如下所示 station code SOC station name Southend

随机推荐

  • 使用 googletest 测试受保护成员

    谷歌测试时我对继承感到困惑 我有一个class A具有protected属性 如果我想访问那些我必须扩展该类 但同时我也需要扩展public testing Test唯一的目的是gtest 这个问题最优雅的解决方案是什么 我也在努力避免 d
  • 错误:1210:执行准备好的语句的参数数量不正确

    我正在尝试使用 Python 将数据插入 MySQL 出现这个错误的原因是什么 编程错误 1210 执行的参数数量不正确 准备好的声明 我的Python代码 connection mysql connector connect host l
  • UISearchController 搜索栏在第一次单击时消失

    我在 TableView 中实现了 UISearchController 由导航控制器推动 首先我的问题是 每当我单击搜索栏时 它就会消失 当我输入一些文本时它起作用 但它保持完全空白 然后我设法使用以下代码半解决了该问题 void sea
  • 对 ASP.NET Core 中缺少必需属性的响应

    给定以下控制器 using System ComponentModel DataAnnotations using Microsoft AspNetCore Mvc namespace WebApplication1 Controllers
  • Scala 中未绑定的可比较排序

    我对 Scala 中的排序有点熟悉Ordering的 但是我想对 Java 中定义的一些对象进行排序 他们是Comparable not Comparable T and final final class Term implements
  • Slug 大小对于 Heroku 上的 Flask 应用程序来说太大

    我正在部署一个非常简单的烧瓶应用程序 带有面部识别模型 我只是将 Flask 应用程序代码和模型权重推送到 Heroku 我的 slug 大小仍然是 556M 超过了 500M 的限制 我在requirements txt 中有最低要求 这
  • 为什么从返回 int32_t 的函数返回 0x80000000 不会导致警告?

    考虑 int32 t f return 0x80000000 为什么这不会导致编译器警告 至少在 GCC 上 0x80000000 超出范围int32 t INT32 MAX is 0x7fffffff 我相信这应该会导致隐式转换 这是正确
  • 在 AWS Lambda 函数中使用 Django ORM

    我有一个现有的 Django 应用程序数据存储在 Postgres RDS 下 现在我想通过 lambda AWS 函数和 Django 风格的 ORM 查询 更新数据 我知道理论上这是可能的 如果 使用 lambda 函数打包整个 Dja
  • 如何进行水平视差滚动

    我正在使用最新版本的 Bootstrap JQuery 和 Skrollr 我想要一个静态背景和几个在您通过视差滚动滚动时出现的场景 我可以在您滚动时制作场景 但我正在寻找一种方法 让您看起来不会向下移动页面 我正在寻找像这样的图像的场景
  • 使用 BigQuery 查询地理空间数据

    您好 我想获取基于 GPS 坐标的公共场所 餐厅 酒店 电影院等 邻居列表 BigQuery 可以做到这一点吗 如果您将经纬度或 GPS 坐标作为列 那么您绝对可以使用坐标上的 WHERE 比较从 BigQuery 中获取矩形区域 然后在选
  • 在 Windows 10 中找不到 tools.jar React Native Android

    伙计们 我只是尝试在我的笔记本电脑上安装 React Native 我已遵循所有设置说明 但仍然收到这些错误 What went wrong Execution failed for task app compileDebugJavaWit
  • 使用训练有素的 Spark ML 模型提供实时预测[重复]

    这个问题在这里已经有答案了 我们目前正在测试一个基于 Spark 在 Python 中实现 LDA 的预测引擎 https spark apache org docs 2 2 0 ml clustering html latent diri
  • 如何使用堆在线性时间内找到数字的中位数?

    维基百科 http en wikipedia org wiki Heap data structure Heap applications says 选择算法 找到最小值 最大值 最小值和最大值 median 或者 甚至第 k 大元素也可以
  • 在Windows中设置子进程名称?

    我有一个进程 它运行多次子进程 每个子进程都没有 GUI 并且需要为任务管理器的所有子进程设置不同的 名称 和 描述 可以使用Win API吗 我找不到 Windows 系列的解决方案 我查看了 WriteProcessMemory 但它看
  • 使用 JavaScript 的 Selenium Webdriver,如何使用 chrome.exe 的特定路径启动 Chrome?

    我有以下 Javascript 代码 它使用由指定的 Chrome 路径启动 ChromePATH环境变量 let driver await new Builder forBrowser chrome build 如何使用 Chrome 的
  • 在 Python 中打开 URL 并获取最多 X 字节的最佳方法是什么?

    我想让机器人每小时获取一个 URL 但如果网站运营商是恶意的 他可以让他的服务器向我发送一个 1 GB 的文件 有没有好的方法可以将下载限制为 100 KB 并在该限制之后停止 我可以想象从头开始编写自己的连接处理程序 但如果可能的话 我想
  • 设置从磁盘加载的背景图像

    我想在运行时更改 QFrame 背景 但是 我会从磁盘 图像 加载背景 在 QFrame 中设置样式表不起作用 因为图像不在资源中 一种方法是设置 QPushButton 图标 例如 QPixmap img images 01 png ui
  • JMeter:为单个用户触发多个并发 HTTP 请求

    我有一个带有线程组和 Cookie 管理器的 JMeter 负载测试脚本 线程组中的用户首先使用HTTP采样器登录来获取cookie 然后 循环控制器触发交错采样器 该采样器在几个向服务器发出查询的 HTTP 采样器之间交替 现在 我希望交
  • Delphi:更好的设计以避免循环单元引用?

    我在 Delphi 10 中有一个三角形网格结构 出于性能原因 我将网格顶点 三角形面等的数据存储在 TList 的后代中 我让 TList 为列表中的每个成员进行计算 对于这些计算 我需要访问 TMesh 结构的某些字段 因此 在创建 T
  • SVG - 从窗口坐标到ViewBox坐标

    基本上我有一个 svg SecondSVG 到一个 svg FirstSVG 到一个 svg MainSVG 每个 svg 都有自己的 ViewBox 该页面可以由另一个页面加载到屏幕上的任何位置 那么基本上我如何找到 SecondSVG