HTML 5在图像上绘制弯曲的文本

Question

我们如何在图像上的特定位置绘制弯曲的文本，如下所示。

Answer 1

您可以使用<textPath>SVG元素在路径上绘制文本。可能有点麻烦，但我将带您逐步了解。

首先，您需要创建一个<defs>包含希望文本遵循的路径的部分。如果您仅可以使用一个<circle>元素，那将使事情变得更容易，但是那是行不通的。它必须是一个<path>元素。幸运的是，SVG的路径图确实支持圆弧，因此无需费解Bézier曲线。

在这里，我定义了两个以（0,0）为中心，半径为120的半圆弧；cp1在顶部顺时针cp2旋转，在底部逆时针旋转：

  <defs>
    <path id="cp1" d="M-120 0A120 120 0 0 1 120 0" fill="none" stroke="red" />
    <path id="cp2" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
  </defs>

SVG的实际图形部分包装在一个<g>元素中，以将原点移动到SVG的中心（在这种情况下，尺寸为300×300）：

  <g transform="translate(150,150)">

现在，创建<text>具有所需外观属性的<textPath>元素，并将其放入其中。使用text-anchor="middle"以保持文本中心对齐，并设置startOffset属性以及要被锚文本的路径的距离。在这种情况下，偏移量等于直径为120的圆的圆周的四分之一，即2×？×120/4，或188.5。该dominant-baseline属性指示文本如何与曲线对齐；设置middle意味着文本的中心线与路径对齐，因此我们可以对上下曲线使用相同的半径。（在某些情况下，这会使文本看起来有些变形。您可以通过设置letter-spacing属性来解决此问题。）

    <text font-size="36" font-family="Courier New" font-weight="bold" fill="white">
      <textPath xlink:href="#cp1" startOffset="188.5" text-anchor="middle"
                dominant-baseline="central">Smooth Roast</textPath>
      <textPath xlink:href="#cp2" startOffset="188.5" text-anchor="middle"
                dominant-baseline="central">Coffee Company</textPath>
    </text>

徽标中间的水平文本可以用相同的方式完成，但可以使用普通<tspan>元素代替<textPath>元素：

    <text font-size="12" font-family="Arial" font-weight="bold" fill="#c97">
      <tspan x="-120" y="0" text-anchor="middle" dominant-baseline="central">SINCE</tspan>
      <tspan x="120" y="0" text-anchor="middle" dominant-baseline="central">1981</tspan>
    </text>

这是完成的结果：

  <defs>
    <path id="cp1" d="M-120 0A120 120 0 0 1 120 0" fill="none" stroke="red" />
    <path id="cp2" d="M-120 0A120 120 0 0 0 120 0" fill="none" stroke="red" />
  </defs>