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.

const svg  = gySVG().viewBox('0 0 100 100').width(75).height(75);
const text = svg.add('text')
  .x(0).y(40).content('Hello, word')
  .style.fontFamily('sans-serif').style.fontSize(18);

<svg viewBox="0 0 100 100" width="75" height="75">
  <text x="0" y="40" style="font-family: sans-serif; font-size: 18px;">Hello, word</text>
</svg>

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().

const svg  = gySVG().viewBox('0 0 100 100').width(75).height(75);
const text = svg.add('text')
  .x(0).y(40).content('A')
  .style.fontFamily('sans-serif').style.fontSize(50)
  .fill('none').stroke('red').stroke_width(1);

<svg viewBox="0 0 100 100" width="75" height="75">
 <text x="0" y="40" fill="none" stroke="red" stroke-width="1" 
       style="font-family: sans-serif; font-size: 50px;">A</text>
</svg>

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().

const svg = gySVG().viewBox(0,0,500,100).width(500).height(100);

svg.add('line').x1(0).x2(250).y1(50).y2(50).stroke('grey').stroke_dasharray(5);
svg.add('line').x1(400).x2(400).y1(0).y2(100).stroke('grey').stroke_dasharray(5);

const g = svg.add('g').font_size(15).font_family('sans-serif');

g.add('text').x(2).y(50).content('baseline');
g.add('text').x(100).y(50).content('middle').dominant_baseline('middle');
g.add('text').x(190).y(50).content('hanging').dominant_baseline('hanging');

g.add('text').x(400).y(15).content('start');
g.add('text').x(400).y(50).content('middle').text_anchor('middle');
g.add('text').x(400).y(85).content('end').text_anchor('end');

<svg viewBox="0,0,500,100" width="500" height="100">
  <line x1="0" x2="250" y1="50" y2="50" stroke="grey" stroke-dasharray="5"></line>
  <line x1="400" x2="400" y1="0" y2="100" stroke="grey" stroke-dasharray="5"></line>
  <g font-size="15" font-family="sans-serif">
    <text x="2" y="50">baseline</text>
    <text x="100" y="50" dominant-baseline="middle">middle</text>
    <text x="190" y="50" dominant-baseline="hanging">hanging</text>
    <text x="400" y="15">start</text>
    <text x="400" y="50" text-anchor="middle">middle</text>
    <text x="400" y="85" text-anchor="end">end</text>
  </g>
</svg>

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.

const svg  = gySVG().viewBox('0 0 100 100').width(100).height(100);
const text = svg.add('text').x(10).y(50);
text.add('tspan').style.fill('red').style.fontSize(20).content('<');
text.content(text.content() + 'tag');
text.add('tspan').style.fill('red').style.fontSize(20).content('>');

<svg viewBox="0 0 100 100" width="100" height="100">
  <text x="10" y="50">
    <tspan style="fill: red; font-size: 20px;">&lt;</tspan>
    tag
    <tspan style="fill: red; font-size: 20px;">&gt;</tspan>
  </text>
</svg>