SVG letter-spacing Attribute
The letter-spacing attribute controls spacing between text characters i.e. increasing or decreasing the space between characters in a text.
Syntax:
letter-spacing = keyword-values | length-values | global-values
Attribute Values: The letter-spacing attribute accepts three values mentioned above and described below:
- keyword-values: This attribute value includes values like normal.
- length-values: This attribute value includes values like em, px, etc.
- global-values: This attribute value includes values like inherit, initial, and unset.
Note: The default value of letter-spacing is normal.
Below examples illustrate the use of letter-spacing attribute in SVG.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style="color: green;
margin-left: 150px;
font-size: 25px;">
GeeksforGeeks
</ h1 >
< svg viewBox = "0 5 700 30"
< text y = "20" letter-spacing = "2" >
It is a Computer Science portal.
</ text >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style="color: green;
margin-left: -5px;
font-size: 25px;">
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 700 30"
< text y = "20" letter-spacing = "-1" >
It is a Computer Science portal.
</ text >
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...