# Text Element

# Create a new text element

The method .add('text') defines a scalable text element into the graphic internal dimensions. This method is required when you want to create text element inside of an SVG component, as it won't be rendered otherwise even if the display property is set.

The text element admits several methods:

  • .x() and .y() define the starting point of the text baseline.
  • .dx() and .dy() change the element position from a previous element.
  • .content() includes the content text into the element.

# Size and color

Aside from the basic attributes, the element created with .add('text') accepts several other methods that allows you to change its appearance and perform several other actions. These include elements such as style, class with all of its sub methods, as well as some others like .fill(), .stroke() or .stroke_width().

# Position

The position of the text is defined by the width .x() and .y(). By default, this is the start and baseline text position, but you can adjust the exact position with these methods: .dominant_baseline(), and .text_anchor().

# tspan

The element is created with text.add('tspan), and defines a subtext within a text element or another tspan element. It allows for adjustment of the style only in a part of the text content.