Introduction to SVG 2D in HTML5 3—Introduction to text, images and rendering text_html5 tutorial skills

Rendering text in SVG

One of the powerful capabilities of SVG is that it can control text to a degree not possible with standard HTML pages, without resorting to images or other plug-ins. Any operation that can be performed on a shape or path (such as painting or filtering) can be performed on text. Although SVG's text rendering is so powerful, there is still one shortcoming: SVG cannot perform automatic word wrapping. If the text is longer than the allowed space, simply cut it off. In most cases, creating multiline text requires multiple text elements.
In addition, you can use the tspan element to divide a text element into several parts, allowing each part to have its own style.

Also, in the text element, spaces are treated similarly to HTML: line feeds and carriage returns become spaces, and multiple spaces are compressed into a single space.

Text displayed directly in the image - text element
To display text directly, you can use the text element. Examples are as follows:

Copy code

The code is as follows:

SVG

As shown in the example above, text Elements can set the following attributes: x,y are the text position coordinates. text-anchor is the direction of text display, which is actually the position (x, y) of the text. This attribute has three values: start, middle and end. start means that the text position coordinates (x, y) are at the beginning of the text, and the text is displayed one by one to the right starting from this point. Middle means that (x, y) is located in the middle of the text, and the text is displayed in both directions, which is actually centered. end means that the (x, y) point is at the end of the text, and the text is displayed one by one to the left.

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

fill, stroke: fill and stroke colors, the specific usage will be summarized later. Related attributes of font: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.

Text range - tspan element
This element is a powerful supplement to the text element; it is used to render text within a range; it can only appear in text elements or tspan elements in child elements. A typical usage is to highlight part of the text. For example:

Copy code

The code is as follows:

This is bold and red

The tspan element has the following attributes. Settings: x, y are used to set the absolute coordinates of the included text. This value will override the default text position. These properties can contain a sequence of numbers that are applied to each corresponding single character. Characters without corresponding settings will immediately follow the previous character. For example:

Copy code

The code is as follows:

Hello World!
This is bold and red

dx,dy is used to set the offset of the included text relative to the default text position. These properties can also contain a series of numbers, each of which will be applied to the corresponding character. Characters without corresponding settings will immediately follow 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 that apply to each character. Characters without a corresponding setting will use the last number set.

Copy code

The code is as follows:

Hello World!
This is bold and red

textLength: This is the most puzzling attribute. It is said that after setting, if the rendering finds that the length of the text is inconsistent with this value, this length will prevail. But I didn't try it out.

Text reference - tref element
This element allows to reference defined text and efficiently copy it to the current location, usually in conjunction with xlink:href to specify the destination element. Because it is copied, when you use css to modify the current text, the original text will not be modified. Look at the example:

Copy the code

The code is as follows:

This is an example text.

Text Path - textPath element
This is more interesting, the effect is also cool, and can create many artistic effects; this element obtains the specified path from its xlink:href attribute And align the text to this path, see the example:

Copy the code

The code is as follows:

This text follows a curve.

Rendering pictures in SVG - image element
SVG The image element in can directly support the display of raster images and is very simple to use. Look at the example below:

Copy the code

The code is as follows:

A few points to note here:
1. If the x or y coordinate is not set, the default is 0.

2. If width or height is not set, the default is also 0.

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

4. The image format supports png, jpeg, jpg, svg, etc., so svg supports nested svg.

5.image, like other elements, is a regular element of svg, so it supports all cropping, masking, filters, rotation and other effects.

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