Common basic shapes in SVG

SVG basic shape (rect), circle, ellipse, line, line and polygon ), this section describes the syntax and tutorials for common basic shapes in SVG.

I. Rectangle <rect>

The <rect> mark of a rectangle allows you to create a rectangle or its variants, such as a square or a rounded rectangle. Syntax:

<Rect x = "80" Y = "53" width = "189" Height = "52" style = "fill: RGB (231,); stroke: RGB (0, 0,128); stroke-width: 1 "/>

The X attribute defines the coordinates of the top left vertex of the rectangle on the X axis of the user coordinate system. The default value is 0;

The y attribute defines the coordinates of the vertex in the upper left corner of the rectangle on the Y axis of the user coordinate system. The default value is 0;

The width and height attributes define the width and height of the rectangle. Any of the values is 0, and the style attribute is not displayed in the rectangle. This allows us to define CSS style attributes supported by the SVG Recommendation Standard.

The fill attribute defines the fill color of the rectangle. The RGB format is used here. SVG also supports color names and hexadecimal color formats, such as fill: red or fill: # ff0000.

For example, you can use fill = "red" or fill = "RGB (255, 0, 0)" or fill = "# ff0000 ".

The stroke attribute defines the border line. in SVG, if it is not defined, the border line does not have any width. In other words, the default border line width of SVG is 0. This applies to all SVG shapes.

If you need to define the border line, use the syntax format: stroke: RGB (128,) to define the color, stroke-width: 1 to define the width

We can also change the transparency of the fill color, which can be written as follows: Fill-opacity: 0.1. The transparency range is from 0 to 1.
You can also define the transparency of the entire element, opacity: 0.5, which is effective for filling and border lines.
You can also define the transparency of the border line separately: Stroke-opacity: 0.8

Defines the rounded rectangle. The RX and ry attributes are used to define the radius of the rounded corner.

RX defines the half-axis length of the elliptical angle of the rounded rectangle in the X direction. If the RX value is greater than half of the width of the rectangle, the RX value is half of the width of the rectangle.

Ry defines the half-axis length of the elliptical angle of the rounded rectangle in the Y direction. If the RY value is greater than half of the rectangle height, the Ry Value is half of the rectangle height.

2. Circle <circle>

To define a circle, you only need to specify the coordinates and radius of the center at the top of the circle. You can also use the style sheet property to define the appearance style. The syntax is as follows:

Circle Cx = "143" Cy = "163" r = "84" style = "fill: RGB (192,192,255); stroke: RGB (128,); stroke-width: 1 "/>

Its Attributes are defined as follows:

CX: X coordinate value of the center in the user coordinate system. The default value is 0.

Cy: Y coordinate value of the center in the user coordinate system. The default value is 0.

R: It is the radius of the circle and cannot be negative. If it is 0, the circle is not displayed.

Iii. elliptic <ellipse>

The elliptical <ellipse> defines the elliptic and defines the circle's very similar, and specifies the radius of the center, X, and Y axis. Syntax:

<Ellipse Cx = "160" Cy = "163" RX = "101" ry = "81" style = "fill: RGB (192,192,255); stroke: RGB, 128); stroke-width: 1 "/>

Its common attributes are defined as follows:

CX: X coordinate value of the elliptical center in the user coordinate system. The default value is 0.

Cy: Y coordinate value of the elliptical center in the user coordinate system. The default value is 0.

RX: it is the half-axis length of the elliptic in the X direction and cannot be negative. If it is 0, the ellipse is not displayed.

Ry: it is the half-axis length of the elliptic in the Y direction and cannot be negative. If it is 0, the ellipse is not displayed.

4. Line Segments <line>

A line <line> defines a straight line by specifying the start point (x1, Y1), End Point (X2, Y2), and width stroke. For example:

<Line X1 = "127" Y1 = "65" X2 = "127" y2 = "200" style = "stroke: RGB (, 0); stroke-width: 2 "/>

To obtain a very fine line, you can specify the stroke-width to be a value greater than 0 and less than 1.

Its common attributes are defined as follows:

X1: X coordinate value of the starting point of a line segment. The default value is 0.

YL: Y coordinate value of the starting point of a line segment. The default value is 0.

X2: X coordinate value of the end point of a line segment. The default value is 0.

Y2: Y coordinate value of the end point of a line segment. The default value is 0.

V. Line <polyline>

The line <polyline> MARK defines a line by specifying the coordinates of each point. The format is as follows:

<Polyline points = "100,200 10,200, 20" style = "stroke: RGB (64, 64, 64); stroke-width: 1"/>

Its main attribute is points:

Points: a list of the coordinates of each vertex in a line. The format of the coordinates is "X, Y. X indicates the abscissa of the vertex, and X indicates the ordinate of the vertex, separate coordinates of different vertices with spaces. The plotting program draws the graph in sequence based on the vertices in points.

6. Polygon

Polygon is used to specify the coordinates of consecutive points to define the polygon. Syntax:

<Polygon points = "223.5, 123.034 276,213.966 171,213.966" style = "fill: RGB (128, 83); stroke: RGB (,); stroke-width: 1"/>

Its main attribute is points.
Points: the value of points is the same as that of points. However, when creating a polygon, the drawing program not only draws the graph according to the vertices in points, the last vertex is connected with the first vertex to form a closed graph.

Note: in SVG, floating point numbers are allowed for precise control.