Open In App

SVG radius Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  
        <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:

HTML




<!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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads