SVG radius Attribute
Last Updated :
31 Mar, 2022
The radius attribute is the radius for the operation on <feMorphology> filter primitive. If two numbers are given then the first number is the x-radius and the second number is the y-radius. If only one number is given, then it is used for both the x and y-axis.
Note: A zero or negative value disables the effect of the <feMorphology> filter primitive.
Syntax:
radius = number-optional-number
Attribute Values: The radius attribute accepts the values mentioned above and described below:
- number-optional-number: It is a pair of numbers, where the second number is optional. Its default value is 0.
The below examples illustrate the use of the radius attribute.
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
text {
font-family: Arial;
font-size: 2.5em;
}
</ style >
</ head >
< body >
< div style = "color: green;" >
< h1 >
GeeksforGeeks
</ h1 >
< filter id = "Geek1" >
< feMorphology operator = "erode"
radius = ".5" />
</ filter >
< text style = "filter: url(#Geek1);"
y = "1em" >Thin Geeky Text</ text >
</ svg >
</ div >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
text {
font-family: Arial;
font-size: 2em;
}
</ style >
</ head >
< body >
< div style = "color: green;" >
< h1 >
GeeksforGeeks
</ h1 >
< filter id = "Geek1" >
< feMorphology operator = "dilate"
radius = "2" />
</ filter >
< text style = "filter: url(#Geek1);"
y = "1em" >Thick Geeky Text</ text >
</ svg >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...