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 )!