Beside SVG's styling properties, SVG also defines geometry properties. Geometry properties describe the position and dimension of the graphics elements ‘circle’, ‘ellipse’, ‘rect’, ‘image’, ‘foreignObject’ and the elements ‘mask’, ‘svg’.
Name: | cx |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘circle’ and ‘ellipse’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘cx
’ property describes the horizontal center coordinate
of the position of the element.
Name: | cy |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘circle’ and ‘ellipse’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘cy
’ property describes the vertical center coordinate
of the position of the element.
Name: | r |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘circle’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘r
’ property describes the radius of the ‘circle’
element.
Negative values for ‘r
’ are illegal.
Name: | rx |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘ellipse’, ‘rect’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘rx
’ property describes the horizontal radius of the
‘ellipse’ element and the curve radius of the ‘rect’
element.
Negative values for ‘rx
’ are illegal.
Name: | ry |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘ellipse’, ‘rect’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘ry
’ property describes the vertical radius of the
‘ellipse’ element and the curve radius of the ‘rect’
element.
Negative values for ‘ry
’ are illegal.
Name: | x |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘mask’, ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘x
’ property describes the horizontal coordinate of
the position of the element.
Name: | y |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | ‘mask’, ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | absolute length or percentage |
Animatable: | yes |
The ‘y
’ property describes the vertical coordinate of
the position of the element.