SVG Combat Development Learning (vii)--Text and sound

"Text:<text> element"

Basic properties

X: The x-coordinate of the lower-left corner of the text, the default measurement unit is the current user coordinate system unit, and the default value is 0.

Y: the y-coordinate of the lower-left corner of the text.

"Nesting <tspan> elements in <text>"

This element allows you to set individual or partial settings for the text position, style, and so on within the same <text> element without adding the <text> element.

Basic properties:

X: Defines the absolute x-coordinate of the lower-left corner of the text individually. The "+" sign indicates that this is a list value (the same as below), and the list value can be split with commas or spaces. The value of the list represents the x-coordinate of the text within each of the elements. If the number of coordinate values defined is greater than the number of text within the element, the extra coordinate values are not valid; Conversely, if the number of words is greater than the number of coordinate values, the position of the remaining text is determined by the parent element <text> the defined coordinate value.

Y: Define the y absolute coordinate of the lower left corner one by one, meaning the X attribute with the above.

DX: Defines the X-relative coordinates of the lower-left corner of the text, relative to the x-coordinate of the previous character, the default value is 0, and if it is a list value, defines the increment value on the x-axis of each text within that element, respectively. If it is the first character, then the text position defined by the <text> element is referenced.

DY: the y-relative coordinate of the lower-left corner of the text, meaning the DX attribute with the above.

Rotate: Defines the angle of the overall counterclockwise rotation at the center of the lower-left corner of the text, with a default value of 0, which means that the text does not rotate. If it is a list value, the rotation angle of the text within each of the elements is defined separately.

The instance code is as follows:

<svg width= "640" height= "480" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/ 1999/xlink ">
<text x= "y=" style= "font-size:20" >
<tspan style= "font-size:30" >W</tspan>
<tspan dx= "5,5,5,5,5,5" dy= " -5,-5,-5,-5,-5,-5" >elcome</tspan>
<tspan x= "y=" dy= "5,5,5,5,5,5" >to svg</tspan>
<tspan x= "y=" > World!</tspan>
</text>
</svg>

"Text Effect"

1. Text Decoration--text-decoration Property

Text decorations are implemented by setting the value of the Text-decoration property, which has the following parameters: Strikethrough "Line-through", "Underline", "underline", "overline", "flashing blink".

2. Text color stroke

This effect does not use special attributes, and it is realized by combining the "stroke", "stroke-width", which we are already familiar with earlier.

The following example:

<svg width= "640" height= "480" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/ 1999/xlink ">
<text x= "y=" style= "font-size:86" fill= "Red" stroke= "Black" stroke-width= "4" >
Svg
</text>
</svg>

3. Text Shadow

In SVG, there are two ways to achieve the shadow effect of text, one is to adopt a filter method, this method will be introduced in the 11th chapter, another method is to use the following method, using two <text> elements of the scattered superposition "curve" to achieve.

<svg width= "640" height= "480" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/ 1999/xlink ">
<text x= "y=" style= "font-size:86" fill= "Red" stroke= "Black" stroke-width= "1" >
Shadow
</text>
<text x= "109" y= "109" style= "font-size:86" fill= "Red" stroke= "Yellow" stroke-width= "1" >
Shadow
</text>
</svg>

4. Transparent text

Use the "opacity" attribute in the <text> element to set the transparency of the text, from 0~1 to Transparent (0%) to opaque (100%).

5. Text that changes along the path

SVG provides <textPath> elements to produce the effect of text arranged along a pre-defined curve path.

See the following example:

<svg width= "640" height= "480" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/ 1999/xlink ">
<defs>
<path id= "Pathpredef"
d= "M 151 202 C 152.1667 195.3333 151.1667 171.8333 158 162 C 164.8333 152.1667 177.3333 145 192 143 C 206.6667 141 234.333 3 139.8333 246 c 257.6667 160.1667 257.1667 185.3333 262 204 c 266.8333 222.6667 263.1667 246.1667 275 262 C 286.8333 277.8333 316.5 295.6667 333 299 c 349.5 302.3333 364.6667 292.6667 374 282 C 383.3333 271.3333 386.5 242.8333 389 235 "/&G T
</defs>
<text x= "y=" fill= "Blue"
Stroke= "Blue" stroke-width= "2"
Font-size= ">"
<textpath xlink:href= "#pathPreDef" >fly text with my heart, Miss you...</textpath>
</text>
</svg>

As shown above

SVG Combat Development Learning (vii)--Text and sound