CODEWITHSUNDEEP
htmlsvghtml5-canvas
Sankar M
Sankar M

Reputation: 4789

HTML 5 draw curved text on a image

How we can draw a curved text on a image in a particular position like below. enter image description here

Upvotes: 3

Views: 2309

Answers (1)

r3mainer
r3mainer

Reputation: 24587

You can use <textPath> SVG elements to draw text on a path. It can be a little bit fiddly, but I'll walk you through it.

First you need to create a <defs> section containing the paths you want your text to follow. It would make things easier if you could just use a <circle> element, but that won't work; it has to be a <path> element. Fortunately, SVG's path drawing does support circular arcs, so there's no need to faff about with Bézier curves.

Here I'm defining two semicircular arcs centred on (0,0) with a radius of 120; cp1 goes clockwise over the top, and cp2 goes anticlockwise around the bottom:

  <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>

The actual drawing part of the SVG is wrapped in a <g> element to move the origin to the centre of the SVG (which has dimensions of 300×300 in this case):

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

Now create a <text> element with the required appearance attributes, and put the <textPath> elements inside it. Use text-anchor="middle" to keep the text centrally justified, and set the startOffset attribute to the distance along the path where you want the text to be anchored. In this case, the offset is equal to one quarter of the circumference of a circle with diameter 120, which is 2 × π × 120 / 4, or 188.5. The dominant-baseline attribute indicates how the text is aligned to the curve; a setting of middle means that the centre line of the text is aligned to the path, so we can use the same radius for the upper and lower curves. (In some cases this can make the text look a bit squished. You can fix this by setting the letter-spacing attribute.)

    <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>

The horizontal text in the middle of the logo can be done in the same way, but using ordinary <tspan> elements instead of <textPath> elements:

    <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>

And here's the finished result:

<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>

Upvotes: 6

Related Questions