我有一个项目，我把一些数据可视化为一个SVG元素，其中包含rect元素。所以我想做的是在SVG的一个特定rect元素上添加一个标签，为了做到这一点，我必须获得rect元素的位置，以便将标签放置在这个确切的位置。
因此，为了实现这一点，我首先使用getBoundingClientRect（）javascript方法获取SVG位置，然后使用相同的方法获取rect元素位置。
然后我得到svg和rect元素的位置之差，得到的值就是标签的放置位置.
这段代码的目的是获取每个元素的位置，然后计算标签的新位置。
parentId参数是svg元素的ID，childId参数是rect元素的ID
function getElemementRelativePosition(parentId, childId) {
var parentPos = document.getElementById(parentId).getBoundingClientRect();
var childPos = document.getElementById(childId).getBoundingClientRect();
var relativePos = {};
relativePos.top = childPos.top - parentPos.top;
relativePos.right = childPos.right - parentPos.right;
relativePos.bottom = childPos.bottom - parentPos.bottom;
relativePos.left = childPos.left - parentPos.left;
return relativePos;
}getElemementRelativePosition函数返回了标签的正确值，但问题是标签的占位符仍然粘在其初始位置，因此即使我改变了它的位置，标签的高度也会将svg元素向下推。
包含标签的div元素具有以下属性
<div style="position:relative;z-index:10;top:@ relativePos.top; left:@ relativePos.left;">
MyLabel
</div>有什么建议，如何实现这一点没有svg移动下面？
提前感谢！
1条答案
按热度按时间2g32fytz1#
正如@maciek所指出的：您可以使用
position:relative将svg和label Package 在div中，并将position:absolute应用到svg和label。备选方案：svg
<text>标签如果您只需要简单的单行标签-
<text>有一些优点：您只需要获取<rect>元素的中心x和y坐标。通过应用
text-anchor:middle和dominant-baseline:middle，文本将相对于矩形的中心垂直和水平居中。使用
getBBox()方法（类似于getBoundingClientRect()-但专门用于svg元素）获得中心坐标。一个简单的标签帮助器可能如下所示：
同样整洁的是：font-size将随父svg元素缩放。
缺点
<text>元素的作用与块元素不同：示例
第一个