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

This article mainly introduces the relevant knowledge of "SVG text, images and methods of rendering text." Xiaobian shows you the operation process through practical cases. The operation method is simple, fast and practical. I hope this article "SVG text, images and methods of rendering text" can help you solve the problem.

Rendering text in SVG

One of SVG's great capabilities is that it can control text to a degree that is not possible on standard HTML pages, without resorting to images or other plug-ins. Anything you can do on shapes or paths, such as paint or filters, can be done on text. Although SVG is so powerful for text rendering, there is one drawback: SVG cannot perform automatic wrapping. If the text is longer than the allowed space, simply cut it. In most cases, creating multiline text requires multiple text elements.

In addition, you can use the tspan element to divide text elements into sections, allowing each section to have its own style.

Also, in text elements, whitespace is handled similarly to HTML: line feeds and carriage returns become whitespaces, and multiple whitespaces are compressed into a single whitespace.

Text-text elements displayed directly in images

Display text directly, you can use the text element, examples are as follows:

The copy code is as follows:

SVG

As shown in the example above, the text element can set the following properties:

x,y are text position coordinates. text-anchor is the orientation of the text display, which is actually the position (x,y) in the text. This property has three values: start,middle and end. Start indicates that the text position coordinates (x,y) are located at the beginning of the text, and the text is displayed one by one to the right from this point. Middle means (x,y) is located in the middle of the text, and the text is displayed in two directions to the left and right. 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 properties, the following properties can be specified either in CSS or directly in properties:

fill,stroke: Fill and stroke colors, the specific use of which is summarized later. font Related Attributes: 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 within a child of the text element or the tspan element. A typical usage is to highlight parts of text. For example:

The copy code is as follows:

This is bold and red

The tspan element has the following properties that can be set: x,y Sets the absolute coordinate value of the text it contains, which overrides the default text position. These attributes can contain a series of numbers that are applied to each corresponding individual character. A character with no corresponding setting follows the previous character. For example:

The copy code is as follows:

Hello World!

This is bold and red

dx,dy is used to set the offset of the contained text relative to the default text position. These attributes can also contain a series of numbers, each of which applies to the corresponding character. A character with no corresponding setting follows the previous character. You can replace x with dx in the example above to see the effect. rotate Sets the angle of rotation of the font. This property page can contain a series of numbers that apply to each character. Characters with no corresponding settings will use the last number set.

The copy code is as follows:

Hello World!

This is bold and red

textLength: This is the most confusing attribute. It is said that after setting it, when 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 references to defined text and efficient copying to the current location, usually with xlink:href specifying the destination element. Because it is copied, so use css to modify the current text, will not modify the original text. See examples:

The copy code is as follows:

This is an example text.

Text Path- textPath element

This is interesting and cool, and can do a lot of artistic effects; this element takes the specified path from its xlink:href attribute and aligns the text to this path, see an example:

The copy code is as follows:

This text follows a curve.

Rendering images in SVG- image element

The image element in SVG can directly support the display of raster images, which is very simple to use. Consider the following example:

The copy code is as follows:

Here are a few things to note:

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

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

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

4. Image formats support 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, rotations, etc.

That's all for SVG text, images and rendering methods. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

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.