主页 / 问题 / 1165501
Accepted
ioprst
Asked:2020-08-13 20:14:28 +0000 UTC2020-08-13 20:14:28 +0000 UTC

如何在 SVG 文本中保留空格

  • 772

有必要在文本元素中插入一个新值。该值可以是从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>

javascript

1 个回答

  1. Best Answer

    由于该方法str.replace仅替换子字符串的第一次出现（在我的情况下），因此问题中描述了一个问题。将所有出现的_(space) 替换为\u00A0解决问题。

    需要改代码

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

    在

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

相关问题