我想创建一个SVG元素，它包括一个节点列表，每个节点都是一个矩形，里面有一个文本：
<svg class="chart" width="420" height="150" aria-labelledby="title" role="img">
<ng-container *ngFor="let item of listNode">
<g viewBox="0 0 56 18">
<rect [attr.width]="item.w" [attr.height]="2*item.h" fill="white"></rect>
<text [attr.x]="item.x" [attr.y]="item.y" text-anchor="middle" font-family="Meiryo" font-size="item.h"
fill="black">{{item.label}}</text>
</g>
</ng-container>
</svg>
但我想把文本放在矩形的中心(垂直和水平(。为此，我认为在创建SVG元素之前需要测量文本的宽度。我尝试使用以下功能来测量文本大小：
getTextWidth(text, fontSize, fontFace) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = fontSize + 'px ' + fontFace;
return context.measureText(text).width;
}
但结果并不正确。那么，在创建真正的元素之前，有没有任何方法可以测量SVG文本元素的大小(比如我的getTextWidth函数(，或者有没有其他方法可以创建文本正好位于中心的矩形。
有很多方法可以测量文本的宽度和高度，但如果你有文本本身及其字体属性，你就已经有了。
1( 假设您不想计算，可以使用HTMLElement属性。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
const span = document.createElement('span')
document.body.append(span)
span.style = 'font-family: Arial; font-size: 14px'
span.innerHTML = 'TEXT'
document.body.textContent =
`width: ${span.offsetWidth} height: ${span.offsetHeight}`
span.remove()
</script>
</body>
</html>
注意：不要忘记附加您的元素。
2( 使用这些尺寸设置矩形尺寸(如果需要填充，请添加额外的尺寸(，并将文本设置在中间，如下所示：
<text
style="font-family: Arial; font-size: 14px"
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle">TEXT</text>
注意：在文本中始终使用相同的样式。
希望这个帮助：(