获取SVG中g标签的宽度高度及位置坐标
1. 问题的出现
对于普通的HTML元素,有很多获得其宽度width、高度height、距左left、距顶top等属性的方法:
类似offsetWidth,clientWidth,width之类的,通过查看DOM元素的属性可以一探究竟:
然而当遇到SVG的g标签的时候,却碰到问题了:
明明在开发者工具中可以显示的宽高、位置坐标等属性,通过原有的offsetWidth,ClientWidth获得值却为undefined:
这说明,普通的DOMElenment中的方法不适用与SVG,而SVGDocumentElement(SVG文档元素)中并没有相应的属性。
2. 解决方法
有幸,谷爸度娘大法好(前提你要用英文搜索)
有如下两个方法可以获得我们需要的东西,并且全部为JS原生方法:
2.1 getBBox()
首先我们用 SVGElement.getBBox() 的方法来试试看:
<svg width="100%" height="100%" viewBox="0 0 150 360"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="filter1">
<feGaussianBlur in="SourceGraphic" stdDeviation="" result="Gau1"/>
<feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/>
<feComposite in="Com1" in2="Gau1" operator="in"/>
</filter>
<g id="g1">
<circle cx="" cy="" r="" fill="blue" filter="url(#filter1)"></circle>
<circle cx="" cy="" r="" fill="RGB(110,239,10)"></circle>
</g>
</svg>
用方法document.getElementById("g1").getBBox();
得到如下对象
2.2 getBoundingClientRect()
SVG代码还是如上,用document.getElementById("g1").getBoundingClientRect();
的方法,获得另一个对象:
3. 疑点解释及总结
通过比较发现两个方法得到的两组对象的数值并不一样,不难发现原因为:
getBBox() 获得的为元素在当前SVG坐标中的数据,而 getBoundingClientRect 则是获取了了浏览器坐标中的数据(因为SVG标签中的ViewBox属性影响,实际渲染在浏览器中的大小及位置是经过偏移和缩放的)。
两个方法的作用不仅局限在SVG元素中,童鞋们不妨试试在其他元素和特定环境中的奇妙运用。
获取SVG中g标签的宽度高度及位置坐标的更多相关文章
- d3.js svg中 g 标签问题一览
svg 中的g标签, 算是比较特殊 1 没有x y属性 2 没有width height 属性 3 不能fill 4 .... g标签基本只管分组问题, 其他功能一概不提供 要解决这些问题, 直接在g ...
- java中得到图片的宽度 高度:
java中得到图片的宽度 高度:BufferedImage srcImage = null;srcImage = ImageIO.read(new File(srcImagePath));int sr ...
- Jquery和JS获取ul中li标签(转)
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- 获取字符串中img标签的url集合(转载)
/// <summary> /// 获取字符串中img的url集合 /// </summary> /// <param name="content"& ...
- IOS遍历网页获取网页中<img>标签中的图片url
前言: 项目中遇见一个需求遍历网页中所有的<img>标签并且去处图片的url 第一步:编写获取<img >标签的正则表达式,代码如下: -(NSArray*)getImgTag ...
- 使用dom4j工具:获取xml中的标签属性(三)
package dom4j_read; import java.io.File; import java.util.List; import org.dom4j.Attribute; import o ...
- 爬虫技术 -- 进阶学习(十一)【补充】获取html中meta标签中的content的内容
上一篇网易新闻页面信息抓取 -- htmlagilitypack搭配scrapysharp中提及了很多如何快速抓取html中的文本的语句, 但是meta标签中的content内容的抓取,没有提及到! ...
- 获取html中某些标签的值
一.获取单选按钮radio的值 <!doctype html> <html lang="en"> <head> <meta charset ...
随机推荐
- 【简说Python WEB】pyechart在flask中的应用
个人笔记总结,可读性不高.只为自己总结用.怕日后忘记. 这里用到了tushare,pandas等python组件. pyechart的案例 c = ( Bar() .add_xaxis([" ...
- Spinner 用法
</Spinner> <TextView android:layout_width="wrap_content" android:layout_height=&q ...
- hdu1226超级密码 bfs
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1226/ 题目大意是:寻找一个五百位之内的C进制密码,该密码是N的正整数倍,而且只能用给定的数构成密码,求这样的密 ...
- 【2019牛客暑期多校第三场】J题LRU management
题目链接 题意 好吧,这道题我其实看都没看过,队友跟我说了说这道题是模拟题,卡时间.然后我就上了-- 大致就是维护一个线性表,然后有两种操作:插入.查询 插入时,如果这个值(string)之前出现过, ...
- 计算智能(CI)之粒子群优化算法(PSO)(一)
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 计算智能(Computational Intelligence , ...
- DOM 操作成本到底高在哪儿?
从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQuery时代提供的强大便利地操作DOM ...
- spring-cloud-gateway静态路由
为什么引入 API 网关 使用 API 网关后的优点如下: 易于监控.可以在网关收集监控数据并将其推送到外部系统进行分析. 易于认证.可以在网关上进行认证,然后再将请求转发到后端的微服务,而无须在每个 ...
- Python python 函数参数:必选参数,默认参数
import math # 函数的必选参数 '''函数的必选参数,指的是函数调用的时候必须传入的参数 ''' def cal (n): return n * n var = cal(2) '''上面的 ...
- Windows程序卡顿、无响应问题定位
当windows程序出现异常.界面卡顿.无响应情况时,在有工程和源码的情况下,程序员通常是打开IDE,在DEBUG模式下进行调试.但如果是一个RELEASE程序,且无调试环境,该如何来定位呢. 这里介 ...
- 如何理解EventLoop--浏览器篇
前言 最近在准备春招,刷到了JS中的主要运行机制--Event Loop,觉得它的实现思路有必要整理一下,以防忘记.关于它在浏览器上的实现,我结合了自己的理解以及示例代码,想用最通俗的语言表达出来.如 ...