时间戳

首页 > 解决方案 > 如何在创建实际的 SVG 元素（在 Angular 中）之前测量 SVG 中字符串的宽度

javascript - 如何在创建实际的 SVG 元素（在 Angular 中）之前测量 SVG 中字符串的宽度

问题描述

我想创建一个 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 函数），或者有没有其他方法可以创建文本正好在中心的矩形。

标签： javascriptangularsvg

解决方案

有很多方法可以测量文本的宽度和高度，但如果您拥有文本本身及其字体属性，那么您已经拥有了它。

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>

注意：在您的文本中始终使用相同的样式。

希望这有帮助:)

推荐阅读