This is the 13th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)
  • Front end will know will learn | SVG see this article is enough (4)
  • Front end will know will learn | SVG see this article is enough (5)
  • Front end will know will learn | SVG see this article is enough (6)
  • Front end will know will learn | SVG see this article is enough (7)

preface

There are two distinct text modes in SVG. One is text written in an image, and the other is an SVG font. We’ll cover the latter later in the tutorial, but for now we’ll focus on the former: the text written in the image.

text

The text tag is used to place any text on the canvas.

<text x="10" y="20">Hello</text>
Copy the code

The content of the text is written in the body of the text tag, with x and Y representing the position of the text on the canvas.

text-anchor

This property is used to set the text flow direction from the coordinate points. The values are start, end, middle, and inherit. You can see the differences between the four values in the figure below.

<text x="40" y="20" text-anchor="start">Hello</text>
<text x="40" y="50" text-anchor="end">Hello</text>
<text x="40" y="80" text-anchor="middle">Hello</text>
<text x="40" y="110" text-anchor="inherit">Hello</text>
Copy the code

fill

As with other shapes, a text can be colored with the fill attribute. Also fill with reference gradients and patterns.

<defs>
    <linearGradient id="fillTest">
        <stop offset="5%" stop-color="#fc5c7d" />
        <stop offset="85%" stop-color="#6a82fb" />
    </linearGradient>
</defs>
<text x="40" y="20" fill="red">Hello</text>
<text x="40" y="40" fill="green">Hello</text>
<text x="40" y="60" fill="#ee2">Hello</text>
<text x="40" y="80" fill="rgb(255,0,0)">Hello</text>
<text x="40" y="100" fill="url(#fillTest)">Hello</text>
Copy the code

stroke

Similarly, we can set a stroke for the font.

<defs>
    <linearGradient id="strTest">
        <stop offset="5%" stop-color="#00f260" />
        <stop offset="85%" stop-color="#0575e6" />
    </linearGradient>
</defs>
<text x="40" y="20" stroke="red">Hello</text>
<text x="40" y="40" stroke="green">Hello</text>
<text x="40" y="60" stroke="#ee2">Hello</text>
<text x="40" y="80" stroke="rgb(255,0,0)">Hello</text>
<text x="40" y="100" stroke="url(#strTest)">Hello</text>
Copy the code

tspan

This element is used to mark a child of a block of text. It must be a child of a text element or other Tspan element. A typical use is to make a word bold in a sentence to emphasize the point.

<text x="10" y="20">Coordinates:<tspan font-weight="bold">Guangzhou</tspan>
</text>
Copy the code

The tSPAN tag also has the following attributes:

attribute instructions
x Set a new absolute for the containerxCoordinates. It overrides the default current text location. This property can contain a sequence of numbers that are applied to one by onetspanOn each character inside the element.
y Set a new absolute for the containeryCoordinates. It overrides the default current text location. This property can contain a sequence of numbers that are applied to one by onetspanOn each character inside the element.
dx From the current position, start drawing text with a horizontal offset. Here, you can provide a sequence of values that can be applied to successive fonts, thus accumulating one offset at a time.
dy From the current position, start drawing text with a vertical offset. Here, you can provide a sequence of values that can be applied to successive fonts, thus accumulating one offset at a time. 
<text x="10" y="20">Coordinates:<tspan x="10" y="20" font-weight="bold">Guangzhou</tspan>
</text>
Copy the code

attribute instructions
rotate Rotate all the characters by an Angle. If it is a sequence, rotate each character separately to that value, and rotate the remaining characters according to the last value. 
<text x="10" y="20">
    <tspan rotate="18">
        hello world
    </tspan>
</text>
Copy the code

attribute instructions
textLength This is a very vague property that gives the computed length of the string. This means that it allows the rendering engine to fine-tune the placement of the font if its own metric text and length do not satisfy the values provided. 
<text x="10" y="20">
    <tspan x="10" y="20" textLength="80">
        hello world
    </tspan>
    <tspan x="10" y="40" textLength="110">
        hello world
    </tspan>
    <tspan x="10" y="60" textLength="140">
        hello world
    </tspan>
</text>
Copy the code

Other font related properties

The following properties can be set as a property directly in the text tag or declared in CSS.

attribute instructions
font-family Sets the font family for the text
font-style Sets the font style properties for italic text
font-weight Sets the font thickness
font-variant Toggle between small uppercase and plain text options
font-stretch Toggle between an optional stretch version of a given font
font-size Sets the text size
font-size-adjust Adjust the visual size of the font independently of its actual size
kerning Turns the font spacing option on or off
letter-spacing Set the spacing between letters in your text
word-spacing Set the spacing between words in your text
text-decoration Sets/unsets text decorations on fonts

The last

This article describes the use of text tags in SVG and some of its attributes.

Thanks for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀