如何在SVG元素中调整文本大小

Question

我正在尝试将文本放入SVG中，以便我们可以在PowerApps中使用自定义字体

Sp我在Image属性中具有以下定义的图像（我已经切出了大约1000行的Base 64字体定义：

"data:image/svg+xml," & // You need to include this data uri to indicate that the code herein is an SVG image
 EncodeUrl(
    "<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'>
  <style>
    @font-face {
    font-family: 'BHF Beats';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAFHUAA8AAAAA21AAAFFyAAEAAAAAAAAAAAAAAAAAA
{TL:DR}
4q/Jed/AdY8h4kAAHjaY2BgYGQAgqtL1DlA9LU2kwwYDQA7fwWaAAA=) format('woff');
    font-weight: bold;
    font-style: normal;
}

    .BHFBeats { font: 128px BHF Beats;fill: white }
  </style>

  <text x='21' y='180' class='BHFBeats'>ExpenSys Claimant Setup Administration Module</text>
</svg>"
)

通过这些设置，我可以看到（在PowerApps Studio中：

但是我要实现的目标类似于使用简单的[[Label控件，如下所示：

所以我想要的是文本大小正确，并从最左边开始，然后显示

所有文本

我尝试了许多不同的字体大小，视图框大小设置，但无法正确显示...

我要去哪里错了？

更多信息：第二个图像中的

label

控件的高度为50，宽度为823

Answer 1

我会像这样使用javascript计算文本的大小：

let font_size = 128;

// while the text length is bigger than needed 
  while(txt.getComputedTextLength() > 1291 - 21 ){//1291 is the width of the svg canvas taken fron the viewBox. 21 is the offset of the text as in `x="21"`
    //reduce the font size
    font_size -=.25;
    //reset the font size 
    txt.style.fontSize = font_size+"px";
  }

svg {
  border: 1px solid #ccc;
}

body {
  background: black;
}

<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'>
  <style>
    @font-face {
    font-family: 'BHF Beats';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAFHUAA8AAAAA21AAAFFyAAEAAAAAAAAAAAAAAAAAA
{TL:DR}
4q/Jed/AdY8h4kAAHjaY2BgYGQAgqtL1DlA9LU2kwwYDQA7fwWaAAA=) format('woff');
    font-weight: bold;
    font-style: normal;
}

    .BHFBeats { font: 128px BHF Beats;fill: white }
  </style>

  <text id="txt" x='21' y='180' class='BHFBeats'>ExpenSys Claimant Setup Administration Module</text>
</svg>

Answer 2

尝试将preserveAspectRatio属性添加到SVG。

<svg preserveAspectRatio="xMinYMid" ...

这将确保SVG的内容始终从父容器的左端开始。