Question

我想创建一个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函数），还是有其他方法可以在文本居中居中创建带有文本的矩形。

Answer 1

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

1）假设您不想进行数学运算，可以使用 HTMLElement 属性。

void CMFCApplication1Dlg::OnActivate(UINT nState, CWnd* pWndOther, BOOL bMinimized)
{
    //CDialogEx::OnActivate(nState, pWndOther, bMinimized);

    // TODO: Add your message handler code here
    this->Default();
}

注意：别忘了添加元素。

2）使用这些尺寸来设置您的 rect 尺寸（如果需要填充则添加其他尺寸），并在中间设置您的 text ，如下所示：

<!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>

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

希望获得帮助：）

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

1 个答案: