获取svg内text文本元素的高度、宽度及坐标等信息

之前有一篇文章介绍了如何获取svg元素的高度、宽度等信息，传送门：https://blog.csdn.net/lqlqlq007/article/details/81875996

但是svg内的text文本元素通常不会给定宽度和高度，而动态计算文本元素位置时这些信息是必须的（比如希望text文本元素上下左右居中），此时可以通过getBoundingClientRect方法来获取，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<svg id="svgContainer" width="800px" height="500px" style="margin: 5px; border: 2px solid #3f8ce8;"><text x="50" y="50" style="font-size: 20px;">测试</text>
</svg>
</body>
<script>let textArea = $("#svgContainer text")[0].getBoundingClientRect();console.log(textArea.width);
</script>
</html>

getBoundingClientRect方法会返回text文本对象所在范围的矩形对象（通常text文本元素在没有配置transform时文本和矩形是重合的），可以通过这个对象获取到如下位置相关信息：

获取svg内text文本元素的高度、宽度及坐标等信息相关推荐

关于input type=“text”文本框的默认宽度
当文本框的td设置宽度设置为百分比时,出现了一些没有搞懂的地方. 类选择设置td的width 为百分比时,通常要定义父元素的宽度,在我的实战中父元素只能是table,给定table时. 而且这就是说 ...
JavaScript 技术篇-js只获取本节点text文本，不包含子节点
innerText 和 textContent 都是获取所有节点的 firstChild.nodeValue 是获取本节点的text文本,不包含子节点的. 喜欢的点个赞❤吧!
JavaScript 技术篇-textContent获取dom节点text文本内容带空格，js获取带空格的dom节点内容
我们用 innerText 获取到的文本信息是除掉空格的.但有时根据需求我们需要获取到完整的文本信息. 请看效果图: 用 textContent 就可以很好的解决了. 喜欢的点个赞❤吧!
HTML 获取屏幕、浏览器、页面的高度宽度
目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可用以及任务栏的高度和宽度. 3. 浏览器信息:介绍浏览器尺寸信 ...
Jquery 循环遍历table获取tr内指定的元素，并校验查重，删除元素值有相同的tr
//验证申请子表不能重复 function checksublist() {var idarray = new Array();$("table.table_title1").fi ...
c语言窗口内鼠标位置,Gtk获取窗口内光标 | 指针 | 鼠标的绝对和相对坐标，绝对和相对位置...
获取指针绝对坐标和窗口内的相对坐标方法一:直接调用函数获得 int ax, ay; /* absolutely postition*/ int wx, wy; /* The absolutely p ...
获取svg元素的高度和宽度（或其他属性）
下面给出了基于svg元素的js对象获取属性的方法(jqury对象可以转成js对象获取,主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度,但两种定义方式获取属性的方 ...
html文本显示状态代码中表示什么,HTML文本元素标签
表示关键字和产品名称如:查看效果效果:加粗查看效果表示重要的文字如:查看效果效果:加粗查看效果强制换行如: 查看效果效果:在浏览器显示换行查看效果安全换行,一般只用于英文 ...
BeautifulSoup查找、选择、删除标签，获取标签属性、文本等
new一个对象 from bs4 import BeautifulSoup soup = BeautifulSoup(html, features="html.parser") 1 ...

获取svg内text文本元素的高度、宽度及坐标等信息

获取svg内text文本元素的高度、宽度及坐标等信息相关推荐

最新文章

热门文章