文本锁定

<svg viewBox="0 0 100 100">
  <text>
    <tspan class="line-1" textLength="100" x="0" y="1em" font-size="20">
      The Cat
    </tspan>
    <tspan class="line-2" textLength="100" x="0" dy="0.9em" font-size="20" lengthAdjust="spacingAndGlyphs">
      in the
    </tspan>
    <tspan class="line-3" textLength="100" x="0" dy="0.9em" font-size="35">
      Hat
    </tspan>
  </text>
</svg>

SVG 提供了<tspan>标签。虽然它的功能与HTML中的普通<span>非常相似，但它接受可以解锁强大文本整形功能的属性。

其中一个属性是textLength。如果我们将其设置为100，则包装在<tspan>中的文本将被强制到SVG容器的整个长度。

查看CodePen上的Geoff Graham撰写的笔：SVG 文本锁定 – 步骤 1 (@geoffgraham) on CodePen。

另一个属性是lengthAdjust。这只在<tspan>（或<text>）具有设定的textLength时适用，并处理文本扩展或压缩以适应该空间的方式。默认值为spacing，它保留字母形状，但调整字符之间的间隙。我们可以改用spacingAndGlyphs，当自然间距不合适时，它将调整扩展或压缩字符的形状。

查看CodePen上的Geoff Graham撰写的笔：SVG 文本锁定 – 步骤 2 (@geoffgraham) on CodePen。

与<text>一样，<tspan>标签也接受font-size属性，该属性完全按照预期的那样工作：更改文本的大小。我们可以用它来调整文本，在增加textLength时留下了太多或太少的空间，而lengthAdjust使字符变得扭曲。

结合在一起，这三个属性使我们能够创建文本锁定。以下是我们根据上面代码段以及一些额外的CSS样式获得的结果。

查看CodePen上的Geoff Graham撰写的笔：SVG 文本锁定 (@geoffgraham) on CodePen。

其他锁定

我们之前写过关于类型锁定的文章。

类型锁定是一种排版设计，其中单词和字符的样式和排列非常具体。就像设计被真正锁定在适当位置一样。

SVG 非常适合这种事情，因为它的大小调整方式。SVG 中的文本不会像 HTML 中的文本那样重新流动，它以 SVG 独有的方式缩放，这通常是其设计的完美纵横比（尽管您可以控制它）。

因此，如果您在 Adobe Illustrator 等矢量编辑软件中设计了这样的内容

您可以在网络上以这样一种方式显示它（甚至使用自定义字体），从而保留锁定并可缩放

查看CodePen上的Chris Coyier撰写的笔：文本锁定的示例 (@chriscoyier) on CodePen。

阅读更多。