Блог

Главная - Вопросы по программированию - Как кернить текст SVG

Как кернить текст SVG

#css #svg #text #kerning

#css #svg #текст #кернинг

Вопрос:

У меня есть некоторый текст SVG на веб-странице, и я хотел бы отобразить пару букв — как мне это сделать? В HTML я бы просто заключил буквы в <span> теги и переместил их с помощью свойства position, но это не работает с 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>

codepen: https://codepen.io/emilychews/pen/PgmoOE

Ответ №1:

В SVG есть тег tspan, который вы должны использовать для точного позиционирования текста внутри текстового элемента:

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

Ответ №2:

Вы можете попробовать только свойство 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>