Chapter 6: Geometry Properties

Contents

• • 6.1. Horizontal center coordinate: The ‘cx’ property
  • 6.2. Vertical center coordinate: The ‘cy’ property
  • 6.3. Radius: The ‘r’ property
  • 6.4. Horizontal radius: The ‘rx’ property
  • 6.5. Vertical radius: The ‘ry’ property
  • 6.6. Horizontal coordinate: The ‘x’ property
  • 6.7. Vertical coordinate: The ‘y’ property

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’.

6.1. Horizontal center coordinate: The ‘cx’ property

The ‘cx’ property describes the horizontal center coordinate of the position of the element.

6.2. Vertical center coordinate: The ‘cy’ property

The ‘cy’ property describes the vertical center coordinate of the position of the element.

6.3. Radius: The ‘r’ property

The ‘r’ property describes the radius of the ‘circle’ element.

Negative values for ‘r’ are illegal.

6.4. Horizontal radius: The ‘rx’ property

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.

6.5. Vertical radius: The ‘ry’ property

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.

6.6. Horizontal coordinate: The ‘x’ property

The ‘x’ property describes the horizontal coordinate of the position of the element.

6.7. Vertical coordinate: The ‘y’ property

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