如何在 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

尝试将preserveAspectRatio 属性添加到您的 SVG。

<svg preserveAspectRatio="xMinYMid meet" ...

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

更新

例如。有和没有preserveAspectRatio 属性。

div {
  width: 100%;
  height:100px;
  background-color: red;
}

svg {
   width: 100%;
   height: 100%;
}

<div>

  <svg viewBox="0 0 1291 338" xmlns="http://www.w3.org/2000/svg">
    <style>
      .BHFBeats { font: 128px "BHF Beats";fill: white }
    </style>

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

</div>


<br/><br/>


<div>

  <svg viewBox="0 0 1291 338" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
    <style>
      .BHFBeats { font-size: 128px; fill: white }
    </style>

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

</div>

Answer 2

我会像这样使用 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>