HTML5-Introduction to SVG 2D 3-text and image and rendering text

Comments: One of the powerful capabilities of SVG is that it can control the text to a level that is not possible for standard HTML pages, without the need to turn to images or other plug-ins, even though SVG text rendering is so powerful, however, there is still a disadvantage: SVG cannot execute automatic line breaks. Next we will introduce how to render text in SVG. If you are interested, you may find it helpful.

Rendering text in SVG

One of the powerful capabilities of SVG is that it can control the text to a level that is not possible for standard HTML pages, without the need to turn to images or other plug-ins. Any operations (such as painting or filter) that can be performed on the shape or path can be performed on the text. Although SVG text rendering is so powerful, there is still a disadvantage: SVG cannot execute automatic line breaks. If the text is longer than the allowed space, simply cut it off. In most cases, creating multiple lines of text requires multiple text elements.
In addition, you can use the tspan element to divide the text element into several parts, allowing each part to have its own style.

In addition, in the text element, the processing of spaces is similar to HTML: line breaks and carriage return are converted into spaces, while multiple spaces are compressed into a single space.

Text-text element directly displayed in the image
You can use the text element to directly display text. The example is as follows:

The Code is as follows:
<Svg>
<Rect width = "300" height = "200" fill = "red"/>
<Circle cx = "150" cy = "100" r = "80" fill = "green"/>
<Text x = "150" y = "125" font-size = "60" text-anchor = "middle" fill = "white"> SVG </text>
</Svg>

As shown in the preceding example, you can set the following attributes for the text element:

X and y are the coordinates of text positions. Text-anchor is the direction of text display, that is, the position (x, y) is in the text position. This attribute has three values: start, middle, and end. Start indicates that the coordinates (x, y) of the text are at the beginning of the text, and the text is displayed to the right from this point. Middle indicates that (x, y) is located in the middle of the text, and the text is displayed in the left and right directions. In fact, the text is displayed in the center. End indicates that (x, y) points are at the end of the text, and the text is displayed to the left one by one.

In addition to these attributes, the following attributes can be specified either in CSS or directly in attributes:

Fill and stroke: fill and stroke colors. The specific usage is summarized later. Font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.

Text interval-tspan Element
This element is a powerful complement to the text element. It is used to render text within a range. It can only appear in the text element or the child element of the tspan element. A typical usage is to emphasize displaying part of the text. For example:

The Code is as follows:
<Text>
<Tspan font-weight = "bold" fill = "red"> This is bold and red </tspan>
</Text>

The tspan element has the following attributes: x and y are used to set the absolute coordinate value of the contained text. This value will overwrite the default text position. These attributes can contain a series of numbers, which are applied to each corresponding single character. The character with no corresponding settings will keep up with the previous character. For example:

The Code is as follows:
<Text x = "10" y = "10"> Hello World!
<Tspan x = "100 200 300" font-weight = "bold" fill = "red"> This is bold and red </tspan>
</Text>

Dx and dy are used to set the offset between the included text and the default text location. These attributes can also contain a series of numbers, each of which will be applied to the corresponding characters. The character with no corresponding settings will keep up with the previous character. You can replace x in the above example with dx to see the effect. Rotate is used to set the Rotation Angle of the font. This property page can contain a series of numbers applied to each character. If no character is set, the last number is used.

The Code is as follows:
<Text x = "10" y = "10"> Hello World!
<Tspan rotate = "10 20 45" font-weight = "bold" fill = "red"> This is bold and red </tspan>
</Text>

TextLength: This is the most confusing attribute. It is said that after the settings are completed, the length of the rendered text may vary with the value. But I did not try it out.

Text reference-tref Element
This element allows you to reference the defined text and efficiently copy it to the current position. It is usually used with xlink: href to specify the target element. Because it is copied, the original text is not modified when the current text is modified using css. Example:

The Code is as follows:
<Text id = "example"> This is an example text. </text>
<Text>
<Tref xlink: href = "# example"/>
</Text>
 
Text path-textPath Element
This is interesting, and the effect is cool. It can make a lot of artistic effects. This element obtains the specified path from its xlink: href attribute and alignment the text to this path. For example:

The Code is as follows:
<Path id = "my_path" d = "M 20,20 C 40,40 80,40 100,20"/>
<Text>
<TextPath xlink: href = "# my_path"> This text follows a curve. </textPath>
</Text>

Rendering image elements in SVG
The image Element in SVG can directly display grating images, which is easy to use. See the following example:

The Code is as follows:
<Svg width = "5 cm" height = "4 cm">
<Image xlink: href = "Penguins.jpg" x = "0" y = "0" height = "50px" width = "50px"/>
</Svg>

Note the following points::
1. If the x or y coordinates are not set, the default value is 0.

2. If no width or height is set, the default value is 0.

3. If the width or height is explicitly set to 0, rendering of this image is prohibited.

4. The image format supports png, jpeg, jpg, svg, and so on. Therefore, svg supports nested svg.

5. Like other elements, an image is a common element of svg. Therefore, it supports all the effects such as cropping, masks, filters, and rotating.

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/