Skip to content
Related Articles

Related Articles

SVG cy Attribute

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 31 Mar, 2022

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"
         xmlns="http://www.w3.org/2000/">
        <svg viewBox="0 0 300 100
        xmlns=" http://www.w3.org/2000/ ">
 
        <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"
         xmlns="http://www.w3.org/2000/">
        <svg viewBox="0 0 300 100
             xmlns=" http://www.w3.org/2000/svg ">
 
            <circle cx="12% " cy="10% " r="9% "/>
            <ellipse cx="12% " cy="30% " rx="9% " ry="5% " />
        </svg>
    </svg>
</body>
 
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!