The cy attribute defines the y-axis coordinate of a center point.
Syntax:
cyx="y-centre"
Attribute Values:
- length: Length at which we want to set the cy-coordinate.
- percentage: Percentage at which we want to set the cy-coordinate.
We will use the cy attribute for setting the cy-coordinate.
Example 1:
HTML
<!DOCTYPE html><html>
<body>
<svg viewBox="0 0 400 300"
<svg viewBox="0 0 300 100
<circle cx="50 " cy="150 " r="45 "/>
<ellipse cx="50 " cy="50 " rx="45 " ry="25 " />
</svg>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html><html>
<body>
<svg viewBox="0 0 350 300"
<svg viewBox="0 0 300 100
<circle cx="12% " cy="10% " r="9% "/>
<ellipse cx="12% " cy="30% " rx="9% " ry="5% " />
</svg>
</svg>
</body>
</html>
|
Output: