如何更改svg中字符的宽度答案

【问题标题】：how to change width of charater in svg如何更改svg中字符的宽度
【发布时间】：2020-10-26 11:09:18
【问题描述】：

我想在字体大小相同的情况下更改字符宽度。

<svg encode="hex" type="textWrap" width="800" x="20" y="468">
    <text transform="rotate(0 0 0)" font-size-adjust="0.90">
        <tspan fill="black" font-variant="small-caps" char-width="10" font-family="Oswald Medium" font-size="94px" font-size-adjust=""  text-anchor="start" x="0" y="80" stroke-width="5600">[Lithium ion bat-
        </tspan>
    </text>
</svg>

【问题讨论】：

标签： svg font-size

【解决方案1】：

您可以使用textLength 属性。使用textLength，您可能想使用lengthAdjust 告诉svg 如何管理文本长度的更改：spacing 的值将分隔字形。而lengthAdjust="spacingAndGlyphs" 将分隔并更改字形的宽度。

我对您的代码进行了一些更改。我没有使用 svg 元素的宽度，而是使用 viewBox 属性。现在 svg 元素将采用父元素的宽度。或者，如果您需要 800 个单位的宽度，您现在可以添加。

svg{border:solid}

<svg encode="hex" type="textWrap" viewBox="0 0 800 110">
    <text>
        <tspan fill="black" style="font-variant:small-caps" font-family="Oswald Medium" font-size="94px" x="0" y="80" textLength="800" lengthAdjust="spacingAndGlyphs" >[Lithium ion bat-</tspan>
    </text>
</svg>

【讨论】：