SVG 2 – 09 April 2015 TopContentsPreviousNextElementsAttributesProperties

# Chapter 6: Geometry Properties

## Contents

Beside SVG's styling properties, SVG also defines geometry properties. Geometry properties may describe the position or dimension of a basic shape.

## 6.1. Horizontal center coordinate: The ‘cx’ property

Name: cx | | 0 ‘circle’ and ‘ellipse’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`cx`’ property describes the horizontal center coordinate of the position of the element. For it defines the horizontal center coordinate of the radial gradient.

## 6.2. Vertical center coordinate: The ‘cy’ property

Name: cy | | 0 ‘circle’ and ‘ellipse’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`cy`’ property describes the vertical center coordinate of the position of the element. For it defines the vertical center coordinate of the radial gradient.

## 6.3. Radius: The ‘r’ property

Name: r | | 0 ‘circle’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`r`’ property describes the radius of the circle element and the radius of the radial gradient of the element. The radius must be bigger or equal to zero.

## 6.4. Horizontal radius: The ‘rx’ property

Name: rx | | 0 ‘ellipse’, ‘rect’ no refer to the size of the current viewport (see Units) visual absolute length or percentage 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.

## 6.5. Vertical radius: The ‘ry’ property

Name: ry | | 0 ‘ellipse’, ‘rect’ no refer to the size of the current viewport (see Units) visual absolute length or percentage 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.

## 6.6. Horizontal coordinate: The ‘x’ property

Name: x | | 0 ‘mask’, ‘svg’, ‘rect’, ‘image’, no refer to the size of the current viewport (see Units) visual absolute length or percentage 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:

1. Make ‘`x`’ accept a list of length|percentage values rather than a single length|percentage value. For the elements mask, svg, rect, image, we would specify that all but the first list item must be ignored.
2. Don't make ‘`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.
3. Introduce a value of 'auto' to ‘`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.
4. For the text element and the tspan: Map the x and y attributes to different CSS properties like 'text-x' and 'text-y'.

## 6.7. Vertical coordinate: The ‘y’ property

Name: y | | 0 ‘mask’, ‘svg’, ‘rect’, ‘image’, no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`y`’ property describes the vertical coordinate of the position of the element.

SVG 2 – 09 April 2015 TopContentsPreviousNextElementsAttributesProperties