我在网页上有一些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>
代码笔:https://codepen.io/emilychews/pen/PgmoOE
SVG 有一个 tspan 标签,你应该用它来精确定位文本元素中的文本:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
您只能尝试属性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>