SVG rx Attribute
Last Updated :
31 Mar, 2022
The rx attribute defines a radius on the x-axis.
Syntax:
rx = "x-radius"
Attribute Values:
- length: Length at which we want to set the x-radius.
- percentage: Percentage at which we want to set the x-radius.
We will use the rx attribute for setting the radius on the x-axis.
Example 1:
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 300 300"
< ellipse cx = "50" cy = "50"
rx = "20" ry = "20" fill = "green" />
< ellipse cx = "100" cy = "50"
rx = "20" ry = "25" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 300 300"
< rect x = "20" y = "120" width = "60" height = "60"
rx = "0" ry = "0" fill = "green" />
< rect x = "120" y = "120" width = "60" height = "60"
rx = "20" ry = "20" fill = "green" />
< rect x = "220" y = "120" width = "60" height = "60"
rx = "150" ry = "10" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...