DONT ADD ANYTHING HERE!

Notes

<text x y dx dy rotate>"text"</text>
  1. The SVG text element draws a graphics element consisting of text
  2. It's possible to apply a gradient, pattern, clipping path, mask, or filter to text, like any other SVG graphics element
  3. If text is included in SVG not inside of a text element, it is not rendered
  4. This is different than being hidden by default, as setting the display property won't show the text
  5. The text element does not wrap by default, to make this happen it needs to be styled with the white-space CSS property
  6. x
    1. The x coordinate of the starting point of the text baseline
    2. or the x coordinate of each individual glyph if a list of values is provided
  7. y
    1. The y coordinate of the starting point of the text baseline
    2. or the y coordinate of each individual glyph if a list of values is provided
  8. dx
    1. Shifts the text position horizontally from a previous text element
    2. or shifts the position of each individual glyph if a list of values is provided
  9. dy
    1. Shifts the text position vertically from a previous text element
    2. or shifts the position of each individual glyph if a list of values is provided
  10. rotate
    1. Rotates orientation of each individual glyph
    2. Can rotate glyphs individually
    3. value type: list of numbers

Code

HTML

    <div class="flex_container">

        <object data="../svg/svg_example_four.svg"
                type="image/svg+xml">
        </object>

    </div>

SVG

// svg_example_four.svg
    <svg version= "1.1" 

        width = "300"
        height = "150"
        xmlns = "http://www.w3.org/2000/svg">

        <!--outer rectangle-->
        <rect  width="100%" 
               height="100%" 
               fill="lightgoldenrodyellow" />

        <!--Hello-->
        <text x="20" 
              y="50" 
              style="stroke:green;
                     fill:none; 
                     font-size:50px; 
                     font-family:serif;">
            Hello
        </text>

        <!--World-->
        <text x="80" 
              y="120" 
              style="stroke:none;
                     fill:red; 
                     font-size:50px; 
                     font-family:serif;">
            World
        </text>
    </svg>

References

MDN: svg text