Open In App
Related Articles

SVG cx Attribute

Improve Article
Improve
Save Article
Save
Like Article
Like

The cx attribute define the x-axis coordinate of a center point.

Syntax:

cx="x-centre"

Attribute Values:

  • length: Length at which we want to set the cx-coordinate.
  • percentage: Percentage at which we want to set the cx-coordinate.

We will use the cx attribute for setting the cx-coordinate.

Example 1:




<!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="50" cy="50" r="45"/>
        <ellipse cx="150" cy="50" rx="45" ry="25" />
  
    </svg>
</body
  
</html>


Output:

Example 2: 




<!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="10%" cy="12%" r="9%"/>
        <ellipse cx="30%" cy="12%" rx="9%" ry="5%" />
  
    </svg>
</body
  
</html>


Output:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 31 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials