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

Question

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

Answer 1

您可以使用<textPath> SVG元素在路径上绘制文本。它可能有点繁琐，但我会引导你完成它。

首先，您需要创建一个<defs>部分，其中包含您希望文本遵循的路径。如果您只使用<circle>元素，这会使事情变得更容易，但这不起作用;它必须是<path>元素。幸运的是，SVG的路径图确实支持circular arcs，所以没有必要对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>

这是完成的结果：

<svg width="300" height="300" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">
  <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>
  <g transform="translate(150,150)">
    <!-- Circular background: -->
    <circle x="0" y="0" r="150" fill="#820" stroke="none" />
    <circle x="0" y="0" r="145" fill="none" stroke="white" stroke-width="4" />
    <circle x="0" y="0" r="98" fill="none" stroke="white" stroke-width="2" />
    <!-- This is supposed to look like a coffee cup: -->
    <rect x="-45" y="-40" width="80" height="80" fill="white" stroke="none" />
    <rect x="-45" y="30" width="80" height="20" rx="10" ry="10" fill="white" stroke="none" />
    <ellipse cx="45" cy="0" rx="15" ry="20" fill="none" stroke="white" stroke-width="8" />
    <!-- Text manipulation starts here: -->
    <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>
    <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>
  </g>
</svg>