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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: