Как определить размер текста в элементе SVG - PullRequest
Новая
       59

Как определить размер текста в элементе SVG

2 голосов
/ 25 февраля 2020

Я пытаюсь поместить текст в SVG, чтобы мы могли использовать пользовательские шрифты в PowerApps

Sp. У меня есть изображение с приведенным ниже определением в свойстве Изображение (я вырезал определение шрифта Base 64 около 1000 строк : 

"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:

enter image description here

но то, что я пытаюсь достичь, похоже на то, что мы можем получить, используя простой элемент управления Label , как показано ниже:

enter image description here

так что я хочу, чтобы текст был правильного размера и начинался с крайнего левого, и показывал весь текст

У меня есть пробовал много разных настроек для размера шрифта, размера окна просмотра, но не могу понять это правильно ...

Где я ошибаюсь?

Больше информации: label control на втором изображении имеет высоту 50 и ширину, если 823

Ответы [ 2 ]

2 голосов
/ 25 февраля 2020

Попробуйте добавить атрибут 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>
2 голосов
/ 25 февраля 2020

Я бы рассчитал размер текста, используя 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>
...