SVG letter-spacing 属性介绍

SVG（可缩放矢量图形）是一种用于创建矢量图形的 XML 格式。SVG 中的 letter-spacing 属性可用于设置文本的字符间距。

语法

letter-spacing 属性可以在样式表中或作为一个内联样式使用。

在样式表中：

selector {
  letter-spacing: value;
}

作为内联样式：

<element style="letter-spacing: value;"></element>

属性值

letter-spacing 属性的值可以是以下任一一个：

• normal：默认值，字符间距正常
• length：指定字符间距的长度值，允许负值（缩小字符间距）

使用示例

以下是使用 letter-spacing 属性的两个示例：

示例1：设置字符间距为 10px

<svg viewBox="0 0 100 100">
  <text x="25" y="50" font-size="24">
    Hello World!
  </text>
  <text x="25" y="75" font-size="24" style="letter-spacing: 10px;">
    Hello World!
  </text>
</svg>

示例2：设置字符间距为 -5px

<svg viewBox="0 0 100 100">
  <text x="25" y="50" font-size="24">
    Hello World!
  </text>
  <text x="25" y="75" font-size="24" style="letter-spacing: -5px;">
    Hello World!
  </text>
</svg>

总结

letter-spacing 属性可用于控制 SVG 文本元素中字符之间的间距。它的值可以是 length 类型，允许负值（缩小间距）和正值（扩大间距）。此属性可在样式表中或作为一个内联样式使用。