Home
Learn SVG
SVG

Text Element in SVG

The SVG element draws a designs element comprising of text. It's feasible to apply an inclination, design, cutting path, cover, or channel.

Text Element in SVG

Text Element

The SVG <text> element draws a designs element comprising of text. It's feasible to apply an inclination, design, cutting path, cover, or channel to <text>, similar to some other SVG illustrations element.

In case text is remembered for SVG not within a <text> element, it isn't delivered. This is unique in relation to being covered up of course, as setting the showcase property will not show the text.

The text SVG element is utilized to make texts in svg, it takes 2 primary parameters (x, y) which characterizes the horizontal and vertical padding separately.

Text acknowledges the fill, stroke and stroke-width attributes of svg elements.

To make a text, open the <text> ... </text> tag.

Example Code

The above text has a left padding of 20 and a top padding of 60.

Note that texts composed inside a svg tag doesn't seem, 

eg: <svg> Text Element in SVG. </svg> wont show up.

Such texts possibly seems when the client(browser) doesn't uphold SVG.

Something critical with regards to the text element is that it can likewise be fitted to a path!

Attributes of Text Element

The text element has many number of attributes which makes it's drawing and liveliness simpler.

The following is a attributes of the text elements:

  • x - x characterizes the left padding for the text element.
  • y - y characterizes the top padding for the text element.
  • stroke - stroke determines the shade of the boundaries of the text element. Eg: stroke="white".
  • text-anchor - The text-anchor attribute is utilized to adjust the text to one or the other start, center or end. See the underneath example:

    • text-anchor="start" text-anchor="middle" text-anchor="end"

    The Example is a visual guide to the cordinates(x, y) of the text element.

  • textLength - This attribute allows you to determine the width of the space into which the text will be drawn. See the underneath example:

    • textLength="200" textLength="150" textLength="100"

  • lengthAdjust - This attribute is utilized in accordance with the textLength to control how the text is extended or compacted into the length given by the textLength. It has 2 distinct parameters(spacing and spacingAndGlyphs).

    • Example:

    lengthAdjust="spacing" lengthAdjust="spacingAndGlyphs"

    The two of them has a textLength of 120.

    Notice how "spacingAndGlyphs" changed in accordance with the accessible textLength on the grounds that it follows up on the whole text not at all like "Spacing" which acts just on the spaces between the letters.

  • Note that the default an value for lengthAdjust is "Spacing" and length is totally different from lenght.
  • Different attributes includes : fill, stroke-width, stroke-dasharray etc...;

tspan Element

The tspan <text> element is utilized to characterize a part of text in a text element.

When utilized inside a text element, <tspan> ... </tspan> can indicate an alternate size, color, position, transformation and so forth for the encased text(s).

Example Code

The <tspan> element can be nested however <text> can't be nested!

textPath Element

The textPath element is utilized to make a svg text fit to a custom path.

<textPath> has one required attribute called xlink:href, this attribute indicates which path to fit the text through id.

Example Code

Notice that we needn't bother with the x, y cordinates for the <text> element as the <path/> deals with everything.

On the off chance that the text floods the given path, the overflown text is covered up of course.

Ensure that you distinguished your path so that xlink:href can connection to it with CSS grammar.

For Output

Copy Code which you want to see the output & Try our CTLive HTML Editor

Conclusion

The SVG <text> element also supports the Global Attributes and Event Attributes.

Post a Comment