Shulou(Shulou.com)06/03 Report--

This article introduces the text and images and rendered text in HTML5 SVG. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Render text in SVG

One of the powerful capabilities of SVG is that it can control text to the extent that a standard HTML page is impossible without resorting to images or other plug-ins. Any action that can be performed on a shape or path, such as a drawing or filter, can be performed on text. Although SVG's text rendering is so powerful, there is one drawback: SVG cannot perform automatic line 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 the text element into parts, allowing each part to have its own style.

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

Text displayed directly in the picture-text element

To display the text directly, you can use the text element, as an example:

The code is as follows:

SVG

As shown in the example above, the text element can set the following attributes: XQuery y is the text location coordinate. Text-anchor is the direction in which the text is displayed, that is, the position (XMagol y) is in the position of the text. This property has three values, start,middle and end. Start indicates that the text location coordinates (xPowery) are at the beginning of the text, from which the text is displayed one by one to the right. The middle expression (XBI y) is located in the middle of the text, and the text is displayed in the left and right directions, which is actually centered. The end indicates that the point is at the end of the text, which is displayed one by one to the left.

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

Fill,stroke: fill and stroke colors, which are 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 interval-tspan element

This element is a powerful complement to the text element; it is used to render text within an interval; it can only appear in text elements or children of tspan elements. The typical usage is to emphasize the display of part of the text. For example:

The code is as follows:

This is bold and red

The tspan element has the following attributes that can be set: XPowerY is used to set the absolute coordinate value of the contained text, which overrides the default text position. These properties can contain a series of numbers that are applied to each corresponding individual character. A character without a corresponding setting follows the previous character. For example:

The code is as follows:

Hello World!

This is bold and red

Dx,dy is used to set the offset of the included text from the default text position. These attributes can also contain a series of numbers, each of which is applied to the corresponding character. A character without a corresponding setting follows the previous character. You can replace the 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 can be applied to each character. Characters that do not have a corresponding setting use the last set number.

The code is as follows:

Hello World!

This is bold and red

TextLength: this is the most puzzling attribute. It is said that this length will prevail when the rendering finds that the length of the text does not match this value. But I didn't try it out.

Text reference-tref element

This element allows you 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:

The code is as follows:

This is an example text.

Text path-textPath element

This is interesting and cool, and can produce a lot of artistic effects; this element gets the specified path from its xlink:href attribute and aligns the text to this path. See the example:

The code is as follows:

This text follows a curve.

Render Pictures in SVG-image element

The image element in SVG can directly support the display of raster images, which is easy to use. Look at the following example:

The code is as follows:

Here are a few points to pay attention to:

1. If the x or y coordinates are not set, the default is 0.

two。 If width or height is not set, the default is 0. 0.

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

4. The format of the image 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 so on.

On the HTML5 SVG text and images and rendering text introduction is how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.