SVG cx Attribute
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 <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 <circle cx="10%" cy="12%" r="9%"/> <ellipse cx="30%" cy="12%" rx="9%" ry="5%" /> </svg></body> </html> |
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
