Beside SVG's styling properties, SVG also defines geometry properties. Geometry properties may describe the position or dimension of a basic shape.
| Name: | cx |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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. For ‘radialGradient’ it defines
the horizontal center coordinate of the radial gradient.
| Name: | cy |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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. For ‘radialGradient’ it defines
the vertical center coordinate of the radial gradient.
| Name: | r |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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 and the radius of the radial gradient of the
‘radialGradient’ element. The radius must be bigger or equal
to zero.
| Name: | rx |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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. The horizontal radius must be bigger or equal to zero.
| Name: | ry |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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. The vertical radius must be bigger or equal to zero.
| Name: | x |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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.
In opposite to all other usage, the ‘text’ element and the ‘tspan’ element do have x and y attributes with length lists. So far, there are four proposals:
x’ accept a list of length|percentage values rather than a
single length|percentage value. For the elements
‘mask’, ‘svg’, ‘rect’,
‘image’, ‘foreignObject’ we would specify that all but the
first list item must be ignored.x’ a presentation attribute for the
‘text’ element and the ‘tspan’ element. We
had experience with that on the width and height attribute for
HTMLCanvas. The position of the two elements could not be set by the
CSS properties that apply every where else otherwise.x’. For the ‘text’
element and the ‘tspan’: If the computed value of
the 'x' property is 'auto', take the value of the 'x' attribute.
Otherwise, let the ‘x’ property override the value of the 'x'
attribute. For all other elements, ‘x’ behaves like a normal
presentation attribute.| Name: | y |
|---|---|
| Value: | <length> | <percentage> | <number> |
| 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.