SVG text line feed

Source: Internet
Author: User

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:




<Text x = "20" Y = "50" font-size = "30">
Colors can be specified
<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 x = "20" y= "200" font-size = "30">
<Tspan fill = "lightsteelblue"> lightsteelblue </tspan>,
<Text x = "20" y= "250" font-size = "30">
<Tspan fill = "mediumseagreen"> mediumseagreen </tspan>,
<Text x = "20" Y = "300" font-size = "30"> and
<Tspan fill = "darkorchid"> darkorchid </tspan>.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.