Circle

  • cx: The position of the center of the circle in the x direction.

  • cy: The position of the center of the circle in the y direction.

  • r: The radius of the circle from the cx, cy position to the perimeter of the circle.

Ellipse

  • cx: The position of the center of the ellipse in the x direction.

  • cy: The position of the center of the ellipse in the y direction.

  • rx: The radius of the ellipse in the x dimension.

  • ry: The radius of the ellipse in the y dimension.

Rectangle

  • x: The position on the x axis of the left hand side of the rectangle.

  • y: The position on the y axis of the top hand side of the rectangle.

  • width: the width in pixel of the rectangle.

  • height: the height in pixel of the rectangle.

  • rx: the radius curve of the corner of the rectangle in the x dimension

  • ry: The radius curve of the corner of the rectangle in the y dimension.

Line

  • x1: The x position of the first end of the line.

  • y1: The y position of the first end of the line.

  • x2: The x position of the second end of the line.

  • y2: The y position of the second end of the line.

polyline

A polyline is a sequence of connected lines described with a single attribute points.

  • points: The points attribute is a list of x,y coordinates that are the locations of the connecting points of the polyline.

polygon

A polygon is a sequnce of connected lines which form a closed shaped described with a single attribte points

  • points: The points attribute is a list of x,y coordinates that are the locations of the connecting points of the polygon.

Path

A path is an outline of an SVG shape which is described with a ‘mini-language’ inside a single attribute.

  • d: This attribute is a list of instructions that allow a shape to be drawn in a complex way using a ‘mini-language’ of command. These commands are written in a shorthand of single letters such a M-moveto, Z-closepath, L-lineto, C-curveto.

Clipped Path(AKA clipPath)

A clipPath is the path of a SVG shape that can be used in combination with another shape to remove any parts of the combined shape that doesn’t fall within the clipPath.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
holder.append('clipPath')
    .attr('id', 'ellipse-clip')
  .append('ellipse')
    .attr('cx', 175)
    .attr('cy', 100)
    .attr('rx', 100)
    .attr('ry', 50)


holder.append('rect')
    .attr('x', 125)
    .attr('y', 75)
    .attr('clip-path', 'url(#ellipse-clip)')
    .style('fill', 'lightgrey')
    .attr('height', 100)
    .attr('width', 200)

Text

A text element is an SVG object which is shaped as text. It is described by two required attributes and three optional ones.

  • x: This attribute designates the anchor point location for the text in the x dimension.

  • y: This attribute designates the anchor point location for the text in the y dimension.

  • dx: This attribute designates the offset of the text from the anchor point in the x dimension. (ususally set to 0.35em, 0.71em)

  • dy: This attribute designates the offset of the text from the anchor point in the y dimension.

  • text-anchor: This attribute controls the horizontal text alignment. It has three values: start, middle, end.