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