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.
See the CSS 2.1 specification for the definitions of
‘width’ and ‘height’.
The CSS ‘width’ and ‘height’ properties are used for
sizing some SVG elements. Specifically, they are used to size
‘rect’, ‘svg’, ‘mask’, ‘image’ and
‘foreignObject’. All of these elements have ‘width’
and ‘height’ presentation attributes.
The value auto for ‘width’
and ‘height’ on these elements must compute to 0.
This means that, for example, a ‘foreignObject’ object element will not shrink-wrap to its contents if auto is used.