The ry attribute defines a radius on the y-axis.
Elements that are using this attribute:
Syntax:
ry = "y-radius"
Attribute Values:
- length: Length at which we want to set the y-radius.
- percentage: Percentage at which we want to set the y-radius.
We will use the ry attribute for setting the radius on the y-axis.
Example 1:
<!DOCTYPE html> <html>
<body>
<svg viewBox="0 0 300 300" <ellipse cx="50" cy="50" rx="10" ry="10" fill="green" />
<ellipse cx="100" cy="50" rx="30" ry="15" 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="10" ry="0" fill="green" />
<rect x="120" y="120" width="60" height="60" rx="18" ry="6" fill="green" />
<rect x="220" y="120" width="60" height="60" rx="15" ry="10" fill="green" />
</svg>
</body>
</html>
|
Output: