Beside SVG's styling properties, SVG also defines layout properties. Layout properties describe graphics elements position and dimension.
Name: | cx |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | 'circle', 'ellipse', 'radialGradient' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
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> |
Initial: | 0 |
Applies to: | 'circle', 'ellipse', 'radialGradient' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
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> |
Initial: | 0 |
Applies to: | 'circle', 'radialGradient' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
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> |
Initial: | 0 |
Applies to: | 'ellipse', 'rect' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
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> |
Initial: | 0 |
Applies to: | 'ellipse', 'rect' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
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> |
Initial: | 0 |
Applies to: | 'pattern element', 'mask element', 'filter element', 'svg', 'rect', 'image', 'foreignObject' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
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:
Name: | y |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | 'pattern element', 'mask element', 'filter element', 'svg', 'rect', 'image', 'foreignObject' |
Inherited: | no |
Percentages: | refer to the size of the current viewport (see Units) |
Media: | visual |
Computed value: | as specified |
Animatable: | yes |
The 'y' property describes the vertical coordinate of the position of the element.
See issue for the 'x' property.
Consider turning more attributes to presentation attributes like 'fx', 'fy', 'dx' and 'dy'.