Front end will know will learn | SVG see this article is enough (8)

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:

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

<text x="10" y="20">
    <tspan rotate="18">
        hello world
    </tspan>
</text>
Copy the code

<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.

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! 😀 😀