Text

A text element is an SVG object, which is shaped as text. It is described by two required attributes and three optional ones.

  • x: This attribute designates the anchor point location for the text in the x dimension (required).
  • y: This attribute designates the anchor point location for the text in the y dimension (required).
  • dx: This attribute designates the offset of the text from the anchor point in the x dimension (optional). There are several different sets of units that can be used to designate the offset of the text from an anchor point. These include em, which is a scalable unit (used in these examples), px (pixels), pt (points which are like pixels), and 5 (percent which is scalable and kind of like em).
  • dy: This attribute designates the offset of the text from the anchor point in the y dimension (optional).
  • text-anchor: This attribute controls the horizontal text alignment (optional). It has three values: start (left aligned) middle (centre aligned) and end (right aligned).

The following is an example of the code section required to draw the text “Hello World.” A notable addition to this code is the style declaration, which applies a black fill to the text. Additionally, there is the declaration .text, which defines the text that will be displayed.

Get hands-on with 1400+ tech skills courses.