Comment: One of the powerful abilities of SVG is that it can control text to a level that is impossible for standard HTML pages without asking for help with images or other plug-ins. Although SVG's text rendering is so powerful, there is still one disadvantage: SVG cannot perform automatic line wrapping. Next, introduce the rendering of text in SVG. Interested friends can learn about it, which may be helpful.
Render text in SVG
One of the powerful capabilities of SVG is that it can control text to a level that is impossible for standard HTML pages without resorting to images or other plugins. Any action that can be performed on a shape or path (such as drawing or filtering) can be performed on text. Although SVG's text rendering is so powerful, there is still one disadvantage: SVG cannot perform automatic line wrapping. 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.
Additionally, you can use the tspan element to divide the text element into sections, allowing each section to have its own style.
Also, in text elements, the processing of spaces is similar to HTML: line breaks and carriage returns become spaces, while multiple spaces are compressed into a single space.
Text displayed directly in the picture - text element
To display text directly, you can use text elements, as follows:
<svg>
<rect 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 example above, the text element can set the following properties:
x,y are the text position coordinates. text-anchor is the direction of text display, which is actually the position (x,y) at the position of text. This property has three values: start, middle and end. start means that the text position coordinate (x,y) is located at the beginning of the text, and the text starts from this point to the right. middle means (x,y) is located in the middle of the text, and the text is displayed in the left and right directions, which is actually centered. end means that (x,y) points are 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 in CSS or directly in the properties:
fill,stroke: fill and stroke colors, the specific use is 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 the text element or the child elements of the tspan element. A typical usage is to emphasize displaying part of the text. For example:
<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
The tspan element has the following properties that can be set: x,y is used to set the absolute coordinate value of the contained text, which will override the default text position. These properties can contain a series of numbers that are applied to each corresponding single character. Characters that do not have corresponding settings will follow the previous character. For example:
<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,dy is used to set the offset of the contained text relative to the default text position. These properties can also contain a series of numbers, each applied to the corresponding character. Characters that do not have corresponding settings will follow the previous character. You can change x from the above example to 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 are applied to each character. Characters that do not have corresponding settings will use the last number set.
<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 puzzling property. It is said that after setting it, when the rendering finds that the length of the text is inconsistent with this value, this length will be the basis. But I didn't try it out.
Text Quotation - tref Element
This element allows reference to defined text and efficiently copy it to the current location, usually with xlink:href specified target element. Because it was copied, when using css to modify the current text, the original text will not be modified. See example:
<text>This is an example text.</text>
<text>
<tref xlink:href="#example" />
</text>
Text Path - textPath Element
This is more interesting, the effect is also cool, and it can produce many artistic effects; this element takes the specified path from its xlink:href attribute and aligns the text on this path, see the example:
<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 in SVG - image element
The image element in SVG can directly support displaying raster images, which is very easy to use. See the following example:
<svg>
<image xlink:href="Penguins.jpg" x="0" y="0"/>
</svg>
A few points to note here:
1. If the x or y coordinates are not set, the default is 0.
2. If width or height is not set, the default is 0.
3. If 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 is a regular element of svg, just like other elements, so it supports all effects such as cropping, masking, filtering, rotation, etc.
Practical reference:
Script index: (v=vs.85).aspx
Development Center: https://developer.mozilla.org/en/SVG
Popular references:
Official Documentation: