SVG basics | draw SVG text-

This article describes how to draw SVG text and the attributes and precautions of SVG text. We can use the text element of SVG to draw text on SVG images .,. We can use Element to draw text on SVG images. The following is a simple example:

    
   
    
Here is the SVG text
   
  

This example defines a text at the position x = 20, y = 40. The text is displayed as "SVG text here ". The returned results are as follows:

Here is the SVG text

Text Definition

Before getting a deeper understanding of SVG text, let's take a look at the following three definitions:

• Glyphs: Glyphs is the visual representation of letters or symbols. For example, because the letter "a" has many different visual representations, you can use different Glyphs to draw it.

• Fonts: Fonts indicates the font, which is a collection of glyphs and can be used to represent a group of letters or symbols.

• Characters: Characters is a binary number that represents a letter or symbol. A character can be expressed in one or more bytes. When rendered by a computer, a characters maps it to a symbol in the font.

Text position

The location of SVG text is The x and y attributes of the element. The x attribute determines the left part of the text (the start position of the text), and the y attribute determines the bottom part of the text (note that this is not the top part ). The y attribute of text is located different from other SVG elements, such as straight lines, rectangles, and other images. The following example shows a string of text and a straight line. Their y attributes are both 40:

Observe the position of the line in the text

Note that the y attribute of the text is located at the bottom of the text, rather than the top.

Text Anchor

The anchor of the text determines which part of the text is placed in the position defined by the x attribute in the text element. The default anchor is the left part of the text, that is, the beginning of the text. You can also set anchor to middle so that it is in the middle of the text and end so that it is on the right of the text.

To set the anchor of text, you can use the text-anchor attribute of CSS. The values of this attribute are start, middle, and end. The following example shows the text position when different text-anchor values are set.

The vertical line is the x position of the three strings of text. They are all located at the position x = "50. You can observe the different positioning methods of the text when the values are different.

The code for the above effect is as follows:

  
       Start
  
  
       Middle
  
  
       End
  

Stroke and fill of Text

Like other SVG images, SVG text can also be used for stroke and fill operations. If you only specify the stroke attribute of the text, the text will be rendered as a text outline. If you only specify the text filling attribute, the text looks the same as usual. Let's take a look at the following three types of text stroke and fill effect:

Adjust the spacing and spacing of SVG text

We can use the letter-spacing and kerning attributes to control the text spacing and padding (the distance between two glyphs ). The following is a simple example:

    
   
    Example SVG text
     
   
    Example SVG text
     
   
    Example SVG text
   
  

The returned results of the above Code are as follows:

Example SVG textExample SVG textExample SVG text

The preceding letter-spacing and kerning use positive values. If you use negative values, the padding will be reduced.

Word spacing

You can use the word-spacing CSS attribute to specify the word spacing. Word spacing refers to the number of blank characters between words. See the following example:

    
   
        Word spacing is normal  
     
   
          Word spacing is 4  
     
   
          Word spacing is 8  
   
  

The returned results are as follows. Note: Firefox may not support this word-spacing attribute.

Word spacing is normalWord spacing is 4Word spacing is 8

The word-spacing value can also be set to a negative number, and the word spacing will be compressed.

Text Layout-SVG text does not have the automatic line feed function

SVG text does not have the automatic line feed function. You must locate each line of text by yourself. To create multiple lines of text, This element may be helpful. We will explain this element in a later article.

You can also place text on a path, such as a circle or a curve. To achieve this effect, you need to use Element.

Rotate text

You can rotate SVG text like other SVG images. To rotate SVG text, use the SVG transform attribute.

      
   
    Rotated SVG text
   
  

The result returned by the code above is:

You can use the rotation method to create vertical SVG text, but there is also a simple method to display vertical text. The writing-mode attribute is used to set the value to tb (Top to Bottom ). Versions earlier than Firefox22 do not support this attribute. See the following example:

      
   
    
Vertical text
   
  

The returned result of the above Code is:

Vertical text

Let's take a look at the English:

      
   
        Vertical  
   
  

You will find that the English letters are also rotated 90 degrees. If you do not need to rotate each letter, you can set the attribute value of glyph-orientation-vertical CSS to 0. This attribute value is used to rotate glyphs. The default value is 90 degrees. See the following example:

  
       Vertical
  
  
       Vertical
  

The returned result of the above Code is:

Text direction

You can use the csction CSSS attribute to set the rendering direction of the text. The direction attribute has two values: ltr and rtl. They mean "from left to right" and "from right to left" respectively. In addition, if you want to render English letters from the right to the left, you need to set unicode-bidi: bidi-override ;. See the following example:

  
   
Show from right to left
  
  
   
Right to Left
  

Right to Left

SVG text style

The following lists a set of CSS attributes that can be used on SVG text. You can also set gradient, fill mode, mask, and other effects for the stroke and fill of text.

Note: The following CSS attribute names must be in lower case; otherwise, they will be ignored during rendering!

Attribute	Description
Font-family	Set Font
Font-size	Set text size
Kerning	Set the padding Value
Letter-spacing	Spacing Between letters
Word-spacing	Spacing Between words
Text-decoration	Whether it is underlined. Optional values: none, underline, overline, and line-through
Stroke	Stroke color of the text. By default, only the fill color and no stroke are displayed. Adding a stroke will make the text rough.
Stroke-width	Stroke width
Fill	Fill color of Text

The following is an example of using some of the above attributes:

      
   
    Styled SVG text
   
  

The returned result of the above Code is:

Text Length

You can use the textLength attribute to set the text length. The text length can be used to adjust the distance between characters to adapt to the specified length. It also adjusts the width of the symbol (glyphs. Using the lengthAdjust attribute, you can specify whether to adjust the Character spacing and symbol width at the same time. See the following example:

  
     A long, long, long text.
  
  
       A long, long, long text.
  
  
       A long, long, long text.
  

The returned results of the above Code are as follows. Note the spacing and character size of the last two strings:

A long, long, long text.A long, long, long text.A long, long, long text.

The above is the basis of SVG | the content of drawing SVG text. For more information, see PHP Chinese website (www.php1.cn )!