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:
<!DOCTYPE html>
<html>
<head>
<style>
text {
font-family: Arial;
font-size: 2.5em;
}
</style>
</head>
<body>
<div style="color: green;">
<h1>
GeeksforGeeks
</h1>
<svg xmlns="http://www.w3.org/2000/svg">
<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:
<!DOCTYPE html>
<html>
<head>
<style>
text {
font-family: Arial;
font-size: 2em;
}
</style>
</head>
<body>
<div style="color: green;">
<h1>
GeeksforGeeks
</h1>
<svg xmlns="http://www.w3.org/2000/svg">
<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:
