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: