SVG text line feed

One of the powerful capabilities of SVG is that it can control the text to a level that is not possible for standard HTML pages, without requiring help from images or other plug-ins (the latter brings accessibility challenges ). Any operations (such as painting or filter) that can be performed on the shape or path can be performed on the text.

One disadvantage is that SVG does not execute automatic line feed. 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.

You can use the tspan element to divide text elements into several parts, allowing each part to have its own style. In the text element, the processing of spaces is similar to that in HTML; line breaks and carriage return are converted into spaces, while multiple spaces are compressed into a single space, as shown in the early example below:

 

 

<G>

<Text x = "20" Y = "50" font-size = "30">
Colors can be specified
</Text>
<Text x = "20" Y = "100" font-size = "30"> by their
<Tspan fill = "RGB (255, 0, 0)"> r </tspan>
<Tspan fill = "RGB (0,255, 0)"> G </tspan>
<Tspan fill = "RGB (0,0, 255)"> B </tspan>
Values </text>
<Text x = "20" y= "150" font-size = "30">
Or by keywords such
</Text>
<Text x = "20" y= "200" font-size = "30">
<Tspan fill = "lightsteelblue"> lightsteelblue </tspan>,
</Text>
<Text x = "20" y= "250" font-size = "30">
<Tspan fill = "mediumseagreen"> mediumseagreen </tspan>,
</Text>
<Text x = "20" Y = "300" font-size = "30"> and
<Tspan fill = "darkorchid"> darkorchid </tspan>.
</Text>

</G>