如何紧缩 SVG 文本

Question

我在网页上有一些 SVG 文本，我想对其中几个字母进行紧排 - 我该怎么做呢？使用 HTML 我只是将字母包装在 <span> 标签中并将它们移动到属性位置，但这不适用于 SVG。

例如，我如何在提供的代码片段中移动工作中的字母 'o'？

任何帮助都会很棒。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 300vh;
  margin: 0;
  padding: 0;
  font-family: arial-black;
}


text {
  font-size: 2rem;
}

<svg class="git-svg" width="500" height="400" viewBox="0 0 500 400">
    <text x="15" y="26" fill="#000">How We Work</text>
</svg>

代码笔：https://codepen.io/emilychews/pen/PgmoOE

Answer 1

只能尝试属性 letter-spacing.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 300vh;
  margin: 0;
  padding: 0;
  font-family: arial-black;
}


text {
  font-size: 2rem;
  letter-spacing: 2px;
}

<svg class="git-svg" width="500" height="400" viewBox="0 0 500 400">
    <text x="15" y="26" fill="#000">How We Work</text>
</svg>

Answer 2

SVG 有一个 tspan 标签，您应该使用它来精确定位文本元素中的文本：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

如何紧缩 SVG 文本

How To Kern SVG text

css

svg

text

kerning