Text Design

Next ❯Opacity

To design the text

  • turned_in_notText Related Properties
    • text-anchor
    • text-decoration
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
    • font


text-anchor

Used to set text position

Syntax

text-anchor:start|middle|end
StartMiddleEnd
<svg height="100" width="200">
  <line x1="100" y1="20" x2="100" y2="80" stroke="red"/>
  <text x="100" y="30" style="text-anchor:start">Start</text>
  <text x="100" y="55" style="text-anchor:middle;">Middle</text>
  <text x="100" y="80" style="text-anchor:end">End</text>
</svg>
text-anchor


text-decoration

Used to set text decoration

Syntax

text-decoration:underline|overline|line-through
underlineoverlineline-through
<svg height="100" width="200">
  <text x="50" y="30" style="text-decoration:underline;">underline</text>
  <text x="50" y="55" style="text-decoration:overline;">overline</text>
  <text x="50" y="80" style="text-decoration:line-through;">line-through</text>
</svg>
text-decoration


Font Related

Used to set font appearance for the text

Properties used

font-family, font-size, font-style, font-variant, font-weight, font

See CSS Font



  • Opacity
❮ Prev Stroke Design
Next ❯Opacity
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯