如何解析SVG元素的viewBox x、y、宽度和高度值?

2023-12-02

假设我有一个 SVG 元素:

<svg id="myMap" viewBox="0 0 200 200"></svg>

我如何获得特定值 myMap 的 viewBox?举一个简单的例子:如何获取 myMap 的 viewBox 属性的“x”值? (对于上面的示例,x 值是第一个零 (0))。

以下是我尝试过的语法的一些变体:

<script>
  var myMap = Snap("#myMap");
  alert(myMap.attr("viewBox"));//dislays [object Object]
  alert(myMap.attr("viewBox.vbx"));//also dislays [object Object]
  alert(myMap.attr("viewBox.x"));//also dislays [object Object]
</script>

上述所有示例都在警报框中显示[object Object]。
我需要正确的 x、y、视口宽度和高度的浮点值来实现地图中的放大和缩小功能。


你总是可以直接从 DOM 中读取它

alert(document.getElementById("myMap").viewBox.baseVal.width);
<svg id="myMap" viewBox="0 0 200 200"></svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何解析SVG元素的viewBox x、y、宽度和高度值? 的相关文章

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

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

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

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe
  • 在 SVG 中设置悬停语句样式

    我正在计划一个基于这个 SVG 插图的网络 菜单 我的想法的原则 一个样式为活动的圆圈 一个样式为悬停的圆圈以及一个也需要设置样式的伴随笔画 https i stack imgur com H397o png 当我阅读 SVG 文件的规范时
  • SVG 剪辑路径在 Safari 上不起作用

    我有一个简单的动画 从下往上填充 svg 然后淡出 填充是使用clipPath随着使用path with a stroke dasharray stroke dashoffset 问题是clipPath在 Safari 上似乎完全被忽略了
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • 带有 angular-cli 的 SVG 图标系统

    我有一个 Angular2 项目 它是通过 Angular CLI 创建的 在 webpack 中 有一个加载器来加载 svg sprite 并从 svgs 列表生成该 sprite 但是 当 angular cli 不允许我更改 webp
  • 将 SVG 多边形转换为路径

    我有一个相当大的行政分区 SVG 文件 需要在 Raphael JS 中使用 它有 600 个多边形 重量为 1 2 Mb 现在 我需要将这些多边形转换为路径 以便它在 Raphael 中工作 最棒的多路径工具 http aautar di
  • 使用 classed("active",true) 鼠标悬停时 D3 颜色变化

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

    我想将 HTML 页面中的 SVG 元素下载为 PNG 格式 我尝试了此操作 但下载了一个空白的 PNG 图像 如何将我的 HTML SVG 下载为 PNG 我用过这个https bl ocks org biovisualize 81878
  • Firefox 上的 SVG 图像遮罩

    最近我创建了六边形 SVG 并计划将其实现为 Firefox 的图像遮罩 目前它只适用于 Chrome http jsfiddle net brokeneye WKEbw http jsfiddle net brokeneye WKEbw
  • 移动浏览器上带有阴影模糊的 SVG

    我正在努力在尽可能多的平台上制作带有阴影的 SVG 图标 我为此使用以下简单的 CSS test width 14px height 14px background image url images test svg background
  • 动画 SVG 在页面加载之前不会显示动画

    我的网站包含大量广告 加载需要一段时间 确切地说 这并不是一个问题 但我注意到任何 SVG 动画都会立即绘制第一帧 但动画只有在页面上的所有加载完成后才会出现 SVG 动画通常指示旋转器 加载图标 有没有办法立即启动SVG动画 或者如果我将
  • 在 Android 中使用矢量图像在真实设备上出现问题。 SVG-android

    I use svg android jar from https github com pents90 svg android其工作正常 但仅在 Eclipse 中的模拟器设备上 啊啊啊啊 在真实设备上它只是空的imageView在屏幕上
  • Android和播放SVG动画

    我正在编写一个 Android 应用程序 我想播放一个简单的 SVG 动画 我知道 Android 不提供 SVG 支持 我在这里有什么选择 从 Android Lollipop API 级别 21 开始 可以使用动画矢量Drawable
  • Svg 点击事件无法正常工作

    我试图让我的 SVG 看起来像一个 饼形 看起来一切都很好 此外 我希望它们每个都有不同的点击事件 function one alert 1 function two alert 2 function three alert 3 funct
  • SVG 元素出现在 DOM 中但在屏幕上不可见

    我尝试使用 SVG 绘制五线谱Vexflow http www vexflow com and 拉斐尔 js http raphaeljs com当我加载页面时 SVG 元素出现在 DOM 中 但它们不会出现在屏幕上 我检查了是否有任何 C
  • Android 上的 SVG 支持

    Android 支持 SVG 吗 有什么例子吗 最完整的答案是这样的 Android 2 x 默认浏览器本身不支持 SVG Android 3 默认浏览器支持 SVG 要将 SVG 支持添加到 2 x 版本的平台 您有两个基本选择 安装功能
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要

随机推荐

  • Base64 对文件进行编码并压缩

    我的目标是对文件进行编码并将其压缩到java中的文件夹中 我必须使用 Apache 的 Commons codec 库 我能够对其进行编码和压缩 并且工作正常 但是当我将其解码回原始形式时 看起来该文件尚未完全编码 看起来缺少一些零件 谁能
  • 中断命令 (ctrl+C) 不再在 macOS 上的 VS Code 1.78 终端中工作

    我打开的每个终端的顶部都是文本 bash 此 shell 中没有作业控制 我不记得在 VS Code 中更改过任何内容 但现在我无法再使用 control c 来停止终端中的内容 例如 npm run dev 和 node app js 在
  • 显示我的 nuget 的源代码

    我和我的团队构建了我们自己的框架 我们在许多项目中使用 我们曾经将框架的项目包含在所有其他项目中 但后来我们决定将框架放入 nuget 服务器上的 nuget 包主机中 以便我们可以在开发过程中更轻松地进行版本控制和传播框架 一切都工作正常
  • 将代码文件移动到项目中的另一个文件下

    我想将一个代码文件移到另一个相关文件组下 如下所示 如你所见 SingleObjectViewModel Commands cs隐藏在SingleObjectViewModel cs团体 在某些情况下它可能很有用 我已经创建了SingleD
  • 将 Spring Boot 应用程序部署到 AWS Beanstalk

    将 Spring Boot 项目 最好只是 jar 部署到 AWS Beanstalk 环境的最佳方式是什么 或者我应该将其转换为 WAR 并以这种方式部署 解决方案 基本上我所做的是这样的 创建了新类来告诉 Spring Boot 我的应
  • ASP.NET 中 GridView 中的内部网格线

    我有一个GridView在 ASP NET 2 0 中 我希望仅显示内部网格线 到目前为止 这是我的标记和 CSS
  • 离子启动画面未加载

    我已经检查并仔细检查了 Stack Overflow 以获得有关此问题的答案 但我真的找不到答案 我正在使用离子框架构建一个应用程序 虽然我以前从未遇到过这个问题 但由于某种原因 启动屏幕无法工作 我只是得到一个完全白色的屏幕 然后在加载初
  • iPhone中的应用程序间通信

    我只是想知道是否有任何方法可以从 iPhone 中的应用程序外部访问文档 例如 我希望能够将 Word 文档从邮件发送到我的应用程序 我怎样才能实现这个目标 提前致谢 这是一个博客 描述了 iOS 应用程序中应用程序间通信的工作原理 iOS
  • 在汇编中打印字符的三角形

    我正在开发这个练习 编写汇编程序 给定一个字符作为输入 输出一个大小为字符本身 5 x 5 的三角形 我有一个问题 因为当我输入一个字符时 这些字符没有形成三角形 而是打印了其他字符 我的输入 f 我的输出 期望的输出 f ff fff f
  • 使用 ImageMagick 将具有自定义字体的 SVG 转换为 PNG

    我使用 ImageMagick 将 SVG 转换为 PNG 一切都像魅力一样 直到我尝试使用 font face 添加自定义字体 然后在 SVG 文件中添加自定义字体 在 Batik 中这工作得很好 但现在在 ImageMagick 中我无
  • 制作/查找 html5 验证器书签

    我想找到或制作一个书签 它将使用 W3C HTML 5 验证器验证当前查看的页面的 html 内容 我找到了两个小书签 并试图让其中一个的行为有点像一个 又有点像另一个 但我不知道该怎么做 克里斯 科伊尔有一个HTML5 验证书签效果很好
  • 如何在 python 中使用 xlsxwriter 将数据写入/更新现有 XLSX 工作簿的单元格

    我可以使用写入新的 xlsx 工作簿 import xlsxwriter def write column csvlist workbook xlsxwriter Workbook filename xlsx strings to numb
  • 如何根据条件更新具有 2 个可能值的字段?

    我是 mongodb 的新手 我有一个这样的数据库 universe DC characters name superman selected true name wonder woman selected false name flash
  • 我怎样才能让这个 jQuery 比我现有的更快?

    目前 我将此脚本用于一种 选项卡 系统 单击一个选项卡时 它会隐藏所有其他选项卡 他们都是div的 但现在 我认为在选定的 div 加载之前它的褪色速度不够快 它最终会移动到所选且现在显示的 div 下方 我不需要切换 因为如您所见 我有
  • 为什么 C++ 仍然有一个删除[] AND 删除运算符? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 用单个关键字实现数组的删除
  • Javascript 生成的内容的 SEO 优化?

    我为我的网站 xyz com 创建了小部件 它可以嵌入到不同的网站中 假设我在另一个网站 abc com 中嵌入了一个相册小部件 内容驻留在 xyz com 上 但通过 Javascript 将其拉入 abc com abc com 上的小
  • 如何为 Django 中的某一类别创建链接

    我正在编写一个新闻网站 我在新闻模型中有 类别 我想获取 index html 中名为 意见 的类别之一中的所有新闻 并为每个人创建详细信息页面链接 我可以知道上面提到的新闻的标题 作者等 但是我的大脑真的很垃圾 我不知道如何为每个新闻创建
  • 在子图的情况下,如何为所有 x 轴和 y 轴使用通用标签?

    我使用以下循环来获取子图 for j 1 19 Aj B j subplot 5 4 j plot Aj h end 对于所有这些子图 我只需要一个 x 标签和一个 y 标签 这个怎么做 另外如何将图例插入到所有子图中 您可以使用supla
  • Oracle 中相当于 SQL Server 的 IsNull() 函数的是什么?

    在 SQL Server 中我们可以输入IsNull 确定字段是否为空 PL SQL 中有等效的函数吗 coalesceOracle 和 SQL Server 均受支持 其功能与nvl and isnull 有一些重要的区别 coalesc
  • 如何解析SVG元素的viewBox x、y、宽度和高度值?

    假设我有一个 SVG 元素