svg character_html/css_WEB-ITnose

tag

Use the tag in svg to define a piece of text. For example, Example 1

Write in svg

Zigzag forward on a flat road

Example 1 Dome

<svg height="30" width="200">    <text x="0" y="15" fill="red">在平坦的路上曲折前行</text></svg>

In example 1 x ="0" y="15" is the text positioning coordinate
You may have questions, why is the text 15 above when there is no distance? First of all, you need to understand the concept of baseline. Students who are familiar with CSS will be familiar with it. They will use vertical-align: baseline; but what is baseline?

This is not our focus. Let’s move to "CSS Baseline: The Good, The Bad And The Ugly" Translation: "The Way of CSS Baseline"
The xy coordinates in svg are based on the baseline, as shown in the figure :

So you can’t see that the expected text is not 15px from the top.

tag

You can also set the tag as a text group, which can contain , and each can have Different positioning and text formatting.

Example 2 Dome

<svg height="90" width="200">    <text x="10" y="20" style="fill:red;">Several lines:        <tspan x="10" y="45">First line.</tspan>        <tspan x="10" y="70">Second line.</tspan>    </text></svg>

If the x y of tspan is not set, then the text will be displayed in line similar to css

Text connection in svg

You You can set the text as a link
Example 3 Dome

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">    <a xlink:href="http://www.w3schools.com/svg/" target="_blank">        <text x="0" y="15" fill="red">I love SVG!</text>    </a></svg>

Please note here that it is not allowed to write text directly in the a tag according to the html habit. The text will not be displayed. The text here is a text Object, you want to set the link of this object.

transform

Now the text tags in svg can meet the regular needs. It seems simple, but in fact it is not?? "There is a lot to be done"! ~

For example, let the text rotate Example 4

Example 4 Dome

<svg height="60" width="200">    <text x="0" y="15" fill="red"             transform="rotate(30 20,40)">在平坦的路上曲折前行</text></svg>

transform="rotate(30 20,40)" means that it is in the (20.40) position Rotate the hour hand 30 degrees

dx dy

Although svg does not provide support for typesetting, you can use dx dy to set scattered text
Let us feel it:

Example 5 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="10" y="20">        <tspan dx="0 5 10 15 20">12345</tspan>     </text>    <text x="10" y="65">        <tspan dy="0 5 10 15 20">12345</tspan>     </text>    <text x="10" y="150">        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">12345</tspan>     </text>    <text x="10" y="215">        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">我爱你中国</tspan>     </text></svg>

rotate

rotate The rotation attribute of text. rotate can be a list of values ​​that act on the corresponding letters respectively, as shown in the following example
Example 6 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="10" y="20">        <tspan rotate="0 5 10 15 25">在平坦的路上曲折前行</tspan>     </text></svg>

You still have to take out the baseline. The unit of rotation is degrees. Because our habit is screen positioning, the rotation is clockwise along the y-axis. The rotation is based on each letter's baseline and the left side of the letter. In the example, there are more characters (letters) than rotate. At this time, the extra letters are defined according to the last rule of the rotate list.

textLength

textLength is hard to understand, it does not mean the length of the text. Specify the text using the textLength SVG viewer to align the text at both ends, similar to css text-align:justify

Example 7 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="10" y="20">        <tspan textLength="400" >在平坦的路上曲折前行</tspan>     </text></svg>

There is also an attribute used with textLength----lengthAdjust
lengthAdjust has two values: spacing (default) and spacingAndGlyphs. When set to spacingAndGlyphs, It will stretch the letters until it is suitable to fill the textLength. It is not easy to understand. You will understand after looking at the example.

Example 7 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="0" y="20">        <tspan                 textLength="400"                 lengthAdjust="spacing"                >在平坦的路上曲折前行</tspan>     </text>    <text x="0" y="80">        <tspan                 textLength="400"                 lengthAdjust="spacingAndGlyphs"                >在平坦的路上曲折前行</tspan>     </text></svg>

Usage

Usage of tags:
Friends who have used Illustrator know that we You can make text follow the path and create text in various shapes. We need to use to define (will be introduced in related articles after the desert). After defining the path, the text can follow the defined path.

Example 8 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <defs>          <path id="a1"                   d="M0 50 C150 150 100 -50 300 50"                   stroke="#000" fill="none"/>    </defs>    <text>       <textPath xlink:href="#a1">在平坦的路上曲折前行</textPath>    </text>    <text dy="30">       <textPath startOffset="30%" xlink:href="#a1">在平坦的路上曲折前行</textPath>    </text> </svg>

xlink:href to specify startOffset to specify the starting position on the path.

Here xlink:href can not only specify the path, but also specify a piece of text. For example:

Example 9 Dome