SVG rx Attribute
The rx attribute defines a radius on the x-axis.
- <ellipse>
- <rect>
Elements that are using this attribute:
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" xmlns = "http://www.w3.org/2000/svg" > < 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" xmlns = "http://www.w3.org/2000/svg" > < 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: