javascript SVG字母不能均匀间隔

6psbrbz9 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(137)

我在x轴上用0，12，24，36等来定位每个字母。我希望每个字母的间距是均匀的，但事实并非如此。

const websiteName = "websitename".split('');

<svg width="180" height="36" style={{display:"block"}}>
    {                  
       [...websiteName].map((letter, i) => (
           <text x={i*12} y="30" fontSize="22" key={i}>{letter}</text>
       ))
                    }
</svg>

字符串
它看起来是这样的：

的数据
原因是什么以及如何解决它？

JavaScript

来源：https://stackoverflow.com/questions/77744108/svg-letters-can-not-evenly-spaced

1条答案

按热度按时间

eufgjt7s1#

**示例1：**您可以考虑使用等宽字体，其中每个字符的宽度相同。如果您想坚持使用比例字体，您可以计算每个字母的宽度并相应地调整x坐标。这里是使用等宽字体的示例：

const websiteName = "websitename".split('');

<svg width="180" height="36" style={{ display: "block" }}>
  {websiteName.map((letter, i) => (
    <text x={i * 12} y="30" fontSize="22" fontFamily="monospace" key={i}>
      {letter}
    </text>
  ))}
</svg>

字符串

**示例2：**您可以计算所有字符的总宽度，然后平均分配空格。这里是您的代码的更新版本，以实现这一点：

const websiteName = "websitename".split('');

const letterSpacing = 12;
const totalWidth = websiteName.length * letterSpacing;

<svg width={totalWidth} height="36" style={{ display: "block" }}>
  {websiteName.map((letter, i) => (
    <text x={i * letterSpacing} y="30" fontSize="22" key={i}>
      {letter}
    </text>
  ))}
</svg>;

型

赞(0）回复(0）举报 2024-01-05

我来回答

javascript SVG字母不能均匀间隔

1条答案

相关问题

热门标签

最新问答