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

Question

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

Answer 1

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

首先你需要创建一个<defs>包含您希望文本遵循的路径的部分。如果你可以使用 <circle> 会让事情变得更容易元素，但这行不通；它必须是 <path>元素。幸运的是，SVG 的路径绘制确实支持 circular arcs ，因此无需费心使用贝塞尔曲线。

在这里，我定义了两个以 (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>

logo中间的横排文字也可以用同样的方法做，但是使用普通的<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>