首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Javascript (JQuery)获取<img> svg保留的宽度/高度或viewBox

使用Javascript (JQuery)获取<img> svg保留的宽度/高度或viewBox的方法如下:

  1. 首先,使用JQuery选择器获取到需要操作的<img>元素,可以通过id、class或其他属性进行选择。
代码语言:txt
复制
var svgElement = $('#svgImage');
  1. 接下来,可以使用JQuery的attr()方法获取<img>元素的src属性值,即SVG图片的URL。
代码语言:txt
复制
var svgUrl = svgElement.attr('src');
  1. 使用JQuery的get()方法发送一个GET请求获取SVG图片的内容。
代码语言:txt
复制
$.get(svgUrl, function(svgContent) {
  // 在这里处理获取到的SVG内容
});
  1. 在获取到SVG内容后,可以使用JQuery的parseXML()方法将其解析为XML文档对象。
代码语言:txt
复制
var xmlDoc = $.parseXML(svgContent);
  1. 然后,可以使用JQuery的find()方法选择需要获取的属性或元素。
  • 获取保留的宽度和高度:
代码语言:txt
复制
var width = $(xmlDoc).find('svg').attr('width');
var height = $(xmlDoc).find('svg').attr('height');
  • 获取viewBox属性:
代码语言:txt
复制
var viewBox = $(xmlDoc).find('svg').attr('viewBox');
  1. 最后,可以根据需要对获取到的宽度、高度或viewBox进行进一步处理或使用。

这是一个使用Javascript (JQuery)获取<img> svg保留的宽度/高度或viewBox的基本方法。根据具体的应用场景,可以进一步扩展和优化代码。如果你需要在腾讯云上部署和管理云计算资源,可以考虑使用腾讯云的云服务器CVM、云函数SCF、对象存储COS等相关产品。你可以访问腾讯云官方网站了解更多产品信息和使用指南。

腾讯云相关产品介绍链接:

  • 云服务器CVM:https://cloud.tencent.com/product/cvm
  • 云函数SCF:https://cloud.tencent.com/product/scf
  • 对象存储COS:https://cloud.tencent.com/product/cos
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript、Jquery获取屏幕的宽度和高度

在日常的项目中经常需要获取屏幕的宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight... //屏幕分辨率的宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取: ($(...window).height()); //浏览器当前窗口可视区域高度 ($(document).height()); //浏览器当前窗口文档的高度 ($(document.body).height())...;//浏览器当前窗口文档body的高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin...;//浏览器当前窗口文档body的宽度 ($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

5.3K00
  • 一篇文章带你了解SVG 图标

    但是,在显示SVG图标时,使用HTML的img元素来显示图标是最容易的,HTML img元素可以轻松地放大和缩小SVG图标的大小。...这是img显示SVG图标元素: img src="svg-icon.svg"> ? 要放大或缩小SVG图标的大小,只需使用CSS width或height样式属性。...但是,当使用img元素显示此SVG图标,并放大和缩小img元素的大小时,SVG图标不会放大或缩小。相反,或多或少会显示SVG画布。 下面是将img CSS Height属性设置为32。...该区域从点0,0延伸到点128,128(圆的半径为64,以64,64为中心)。使用SVG Viewbox属性,可以指定只渲染SVG画布的这一区域。 下面是设置了Viewbox值的SVG圆图标的外观。...> 这是显示的SVG图标,高度分别为16、32和48像素: ?

    4.5K30

    将 SVG 与媒体查询结合使用

    通过将 CSS 与 SVG 结合使用,我们可以根据用户交互更改 SVG 的外观。或者我们可以在多个地方使用同一个 SVG 文档,并根据视口的宽度显示或隐藏它的一部分。...如果要更改 SVG 元素的堆叠顺序,则需要在源中移动它们或使用 JavaScript 在 DOM 树中对它们重新排序。 事实上,大多数 CSS 2.1 属性不适用于 SVG 文档。...取而代之的是,视口尺寸由尺寸确定,或img>元件。...,我们的 SVG 图像保留了它的内在尺寸,即使它的一部分被隐藏了。...当超过 320 像素时,viewBox恢复到其初始值。 由于此技术使用onload事件属性或SVGLoad事件,因此将我们的 CSS 和 JavaScript 嵌入到 SVG 文件中是个好主意。

    6.2K00

    svg.js教程及使用手册详解(一)

    做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG。网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言。...简介: SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画。...元素可以绑定事件,包括触摸事件 完全支持不透明蒙版 元素组 动态渐变 填充模式 完整的文档记录 使用说明: 创建一个SVG文档 使用SVG()函数来在一个给定的html元素中创建一个SVG文档: var...> 当然,要定义SVG画布的大小,除了使用像素之外,也可以使用百分比的。...) 上面的一行代码和下面的一行代码是等价的,前两个参数表示svg>的位置,后两个是其宽度和高度。

    8.4K20

    SVG学习笔记,持续记录。

    SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失...DOM可以通过JavaScript进行操作。针对XML内容的DOM的所有核心方法同样适用,所以我们可以创建和重排元素,获取和设置属性的值,查询计算后的样式的值。...1.viewBox 用于在实际的svg上截取一小块,放大到整个svg显示,属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。...不指定大小时,但是指定了viewBox时,svg元素的大小等于父容器的大小,viewBox按照父容器大小进行截取。 不指定大小,也没有指定viewBox,svg大小默认为300*150。...-- 105 表示相对于svg左上角的横坐标,55 表示相对于svg左上角的纵坐标,60 表示截取的视区的宽度,60 表示截取的视区的高度。

    2.9K40

    我至今没想到,我也能在 CSS 中实现 SVG 动画了

    然而,它的未来是不确定的,因为 Chromium 团队建议尽可能使用基于CSS 或javascript 的方法来创建 svg 动画。 而元素可用的属性取决于元素本身。...例如 具有宽度和高度属性,而 元素具有定义其半径的 r 属性。 同时需要注意一点:虽然大多数HTML元素可以有子元素,但大多数 SVG 元素不能有子元素。...同时该区域将根据 svg> 元素的宽度和高度属性进行缩放,以适应视口的边界。 不过, 视口 viewport 的宽度和高度属性的比例可能确实不同于 viewBox 属性的宽度和高度部分的比例。...默认情况下,SVG 画布的长宽比将被保留,代价是 viewBox 比指定的要大,从而导致viewport 内呈现的字体更小。但是你可以通过 preserveAspectRatio 属性指定不同的行为。...虽然这种方法在这种情况下有效,但有一个很大的缺点: 我们无法维护以这种方式定位的元素的长宽比。为此,我们必须使用svg>元素的 viewBox 属性。

    1.3K10

    Power BI着色地图自适应画布大小

    以下动图是自适应的解决效果: 解决方案还是SVG地图(公众号后台回复SVG地图可以获取世界、全国、省市区县地图下载链接),但是放弃使用Synoptic Panel作为显示载体。...除了获取每个地区的path(也就是形状)之外,还需要精确获取每个地区在整个地图的位置以及占用的画布大小,这两个数据可以使用inkscape(免费软件)打开地图,选中每个地区,获得: 例如,内蒙古在地图文件的起始位置横向...X在261.753,纵向Y在34.025,占用的画布宽度为252.572,高度为185.681。...viewbox有四个参数 例如 0 0 649 640表示X轴从0开始,Y轴从0开始,宽度649,高度640的图形。...张鑫旭 比如对于内蒙古,它的宽度高度远远小于整个画布大小,把它的宽度高度用viewbox包裹起来,就能起到放大的效果。

    1.9K30

    前端架构师之路03_移动端规范兼容处理

    10px vm/vh:表示视区宽度/高度,视区总宽度为 100vw,总高度为 100vh 移动端开发中我们使用 rem 作为基本计量单位,同时将根节点默认字号大小设为 font-size:62.5%,因移动端浏览器默认字号大小为...rotate(90deg) 来获取旋转了不同角度的 icon,避免每个角度需要切一张图片 在动画中,利用 CSS3 动画属性如 transform:translate(x,y) 来改变元素的偏移位置,减少使用...2.2.1 SVG 标签和样式 SVG使用标签的方式定义各种图形,外层标签是 svg>,viewBox可以定义用来观察SVG视图的一个矩形区域,它的属性主要包括x、y、width、height,用数字表示...,每个数字之间用空格或逗号隔开,表示定义一个在左上角(x, y)坐标位置,宽度为width,高度为height的矩形。...属性 说明 width 用来控制 SVG 视图的宽度 height 用来控制 SVG 视图的高度 viewBox 定义用户视野的位置及大小 在 svg> 标签的内部,可以使用SVG提供的一些预定义的标签来绘制图形

    8910

    SVG 线条动画基础入门知识

    前言 通常我们说的 Web 动画,其实包含了以下三大类: 1、CSS3 动画 2、javascript 动画(canvas) 3、html 动画(SVG) 3 种动画各有优劣,实际应用中根据情况作出取舍...与其他图像格式相比,使用 SVG 的优势在于: 1、SVG 可被非常多的工具读取和修改(比如记事本) 2、SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。...class:就是我们熟悉的 class 类选择器 width | height: 定义 svg 画布的大小 viewbox: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,...viewBox 在屏幕上的显示会缩放至 svg 同等大小 有了 svg 标签,我们就可以愉快的在内部添加 SVG 图形了 SVG 基本形状 ?...后续文章将会详述非规则图形,如何使用 PS + AI 生成 path 路径,实现 SVG 动画,敬请期待。

    2.9K30

    巧用 SVG 滤镜还能制作表情包?

    本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。 系列另外两篇: 有意思!强大的 SVG 滤镜 有意思!...feTurbulence 滤镜 turbulence 意为湍流,不稳定气流,而 SVG 滤镜能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。...我们动态的变化其中的一个或多个也都可以得到不同的动画效果。...但是点击事件,由于 SVG Animate 标签的一些限制,需要借助一些 Javascript 代码,这里借用 JQuery 简单做个示意。...之前看过这样一篇文章 - 谷歌灭霸彩蛋的效果实现,其中介绍了一种使用 Canvas 实现类似效果的方式,本文这里使用 SVG 滤镜达成了近似的效果。

    1.1K10

    20个对前端开发人员有用的文档和指南

    是时候来更新一下我们需要选择的工具或技术了。请欣赏我们的文档和指南系列的第五部,别忘了让我们知道任何其他我们尚未列入该系列的其他文档或指南。...SitePoint 2.SVG viewBox and preserveAspectRatio Interactive Demo 这是一个与Sara Soueidan系列文章相关的交互页面。...这些演示帮助读者可视化的理解SVG元素中的viewBox和preserveAspectRatio属性。值得注意的是,演示页面还提供了相关的Cheat Sheet。 ?...jQuery 8.Weightof.it 可以快速查看JavaScript库大小并可选择是否启用Gzip压缩的应用。...NPM 11.SVG on the Web 由 Jake Giltsoff 编写的SVG的概述,让你快速了解如何在网站中使用SVG,并给出了一些技巧来帮助你。 ?

    2K70

    Bootstrap实战 - 瀑布流布局

    2.1.3 因为 Bootstrap 的 JS 插件是依赖 jQuery 的,所以想用他的 JS 插件必须先引入 jQuery ,然后再引入 JS 文件夹下的 bootstrap.min.js。 jQuery文件,引入BootstrapJS插件前必需引入--> javascript" type="text/javascript" src="http://libs.baidu.com...简单来说,就是 Bootstrap 为了快速布局从外到内写好了三类样式: 外层的固定宽度 .container 或 100% 宽度 .container-fluid 样式; 行 .row 样式,必须包含在...,看起来很不美观,我们的瀑布流的特点是宽度一致,高度自适应布局。...目前已经实现了宽度一致,要想实现高度自适应要用到 CSS3 中的一个样式 column-width。 官方解释:设置或检索对象每列的宽度,对应的脚本特性为 columnWidth。

    2.9K40

    Power BI 自定义长文本显示路径

    世界上绝大多数事物都不是横平竖直的,Power BI使用几行度量值也可以让文本不再死板的横平竖直,而是按任意路径显示,原理是DAX+SVG。...接下来转入实战,绘制一个直角造型的文本: M.路径文本原型2 = " svg viewBox='0 0 200 200'> SVG在线编辑器(长相都差不多),输入宽度和高度参数(本例为600*200),宽度和高度是由两个因素确定的:你想把这段文本放在报表的什么地方显示多大,以及你的文字走向想要什么造型。...确定好宽度高度后,在左侧选择画笔,画出你的路径走向。在视图-源代码中看到绘制路径的SVG代码,找到中的"d=",复制"d="后双引号中间的内容。...把该内容粘贴到上方的原型度量值文本路径处。度量值中SVG开头的viewbox宽度高度和SVG在线编辑器的参数保持一致。 第二、编辑文本内容。

    8810
    领券