Как сохранить пробелы в SVG тексте

Question

Необходимо в текстовый элемент вставлять новое значение. Значение может быть от 0.0 до 100.0. т.е. максимальное количество символов в строке может быть 5. Есть код, который добавляет нужное количество пробелов справа и слева, если длина текста меньше 5.

Проблема в том, что если в строке имеются подстроки из пробелов (> 1), то они заменяются на один пробел. Нашел решение: заменить пробелы на символ '\u00A0'. Это работает для строк вида 1.0 и 22.4, но если в строке будут все 5 знаков, т.е. это строка 100.0, текст смещается.

Разное поведение можно увидеть, если изменять в моем коде значение переменной new_value.

Как сделать, чтобы текст всегда имел один формат: Ia: n-пробелов, если нужно значение m-пробелов, если нужно A.

new_value = '5.0';  // обязательно один символ после точки
let max_length = 5;

const len = new_value.length;
new_value = new_value.padStart(len + Math.floor((max_length - len) / 2), ' ');
new_value = new_value.padEnd(max_length, ' ');

new_value = `Ia: ${new_value} A`;

new_value = new_value.replace(' ', '\u00A0');

text = document.querySelector('text');
text.innerHTML = new_value;

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 128 128">
  <rect width="384" height="384" fill="#FFFFFF" stroke="none" id="background"/>
  <g id="root" transform="translate(0,0)">
    <g transform="translate(64,20)">
      <rect x="-56.5" y="-8.5" width="113" height="17" fill="#FFFF00" stroke="#000000" stroke-width="1.0" opacity="1.0"/>
      <text transform="translate(0,4.861111111111111)" fill="#000000" font-family="Consolas" font-size="14pt" text-anchor="middle">Ia: 0.0 &#1040;</text>
    </g>
  </g>
</svg>

Answer 1

Так как метод str.replace заменяет только первое вхождение подстроки (в моем случае), возникала проблема, которая описана в вопросе. Замена всех вхождений _ (space) на \u00A0 решает проблему.

Необходимо изменить код

new_value = new_value.replace(' ', '\u00A0');

на

new_value = new_value.replace(/ /g, '\u00A0');

БЛОГ НА HUSL

Как сохранить пробелы в SVG тексте

Ответы (1 шт):