Elements: Basic shapes

Basic shapes are defined by a combination of straight lines and curves, and may be stroked, filled, or used as a clipping path.

• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html

Basic shapes have the DOM base class donner::svg::SVGGeometryElement.

"<circle>"

Creates a circle centered on cx, cy, with radius r.

• DOM object: SVGCircleElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#CircleElement

Attribute	Default	Description
cx	0	Center X coordinate.
cy	0	Center Y coordinate.
r	0	Radius of the circle.

"<ellipse>"

Creates an ellipse centered on cx, cy, with radius rx and ry.

• DOM object: SVGEllipseElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#EllipseElement

<ellipse cx="150" cy="150" rx="140" ry="100" fill="none" stroke="black" />

Attribute	Default	Description
cx	0	Center X coordinate.
cy	0	Center Y coordinate.
rx	auto ("auto" on rx/ry)	Horizontal radius, along the X axis.
ry	auto ("auto" on rx/ry)	Vertical radius, along the Y axis.

"<line>"

Creates a line between two points, using the x1, y1, x2, and y2 attributes.

• DOM object: SVGLineElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#LineElement

<line x1="100" y1="100" x2="200" y2="200" stroke="black" stroke-width="2" />

Attribute	Default	Description
x1	0	Start X coordinate.
y1	0	Start Y coordinate.
x2	0	End X coordinate.
y2	0	End Y coordinate.

"<path>"

Defines a shape using a path, which can include straight lines, curves, and sub-paths.

• DOM object: SVGPathElement
• SVG2 spec: https://www.w3.org/TR/SVG2/paths.html#PathElement

<path d="M 40 50 V 250 C 100 100 115 75 190 125" />

Attribute	Default	Description
d	(none)	Path data, see Path data syntax.

"<polygon>"

Creates a closed polygon with straight lines between the points, using the points attribute.

• DOM object: SVGPolygonElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#PolygonElement

<polygon points="50,50 250,50 150,150 250,250 50,250" />

Attribute	Default	Description
points	(none)	List of points that make up the polygon, see Polyline/polygon points list.

"<polyline>"

Creates a set of connected straight line segments, using the points attribute.

• DOM object: SVGPolylineElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#PolylineElement

<polyline points="50,50 250,50 150,150 250,250 50,250" />

Attribute	Default	Description
points	(none)	List of points to connect with line segments, see Polyline/polygon points list.

"<rect>"

Creates a rectangle with the top-left corner at (x, y) and the specified width and height, optionally with rounded corners.

• DOM object: SVGRectElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#RectElement

<rect x="10" y="50" width="280" height="200" fill="none" stroke="black" />

<rect x="10" y="50" width="280" height="200" rx="50" ry="40" fill="none" stroke="black" />

Attribute	Default	Description
x	0	Top-left corner X coordinate.
y	0	Top-left corner Y coordinate.
width	0	Horizontal radius, along the X axis.
height	0	Vertical radius, along the Y axis.
rx	auto ("auto" on rx/ry)	For rounded corners, the radius of the curve along the X axis.
ry	auto ("auto" on rx/ry)	For rounded corners, the radius of the curve along the Y axis.