SVG Base Graphics

SVG Base Graphics

SVG contains the following underlying graphic elements:

• Rectangle (including optional rounded corners), using elements to <rect> create
• Circular, <circle> creating with elements
• Ellipse, <ellipse> creating with elements
• Lines, <line> creating with elements
• Polyline, <polyline> creating with elements
• Polygons, <polygon> creating with elements

Theoretically, these basic graphic elements can be <path> constructed with elements of the same graph. And all <path> the attributes that are available to the element can be applied to these underlying graphs.

Rect element

<rect>element defines a rectangle aligned to the axis of the current user's coordinate system. The rounded rectangle can be implemented by setting the element's rx and ry attributes.

Property Definition:

• x = <坐标点> , the x-coordinate of the upper-left corner of the rectangle in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• y = <坐标点> , the y-coordinate of the upper-left corner of the rectangle in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• width = <长度> rectangular, the default value is 0. Whether it can be animated: Yes.
• Height = <长度> , rectangle height, default value is 0. Whether it can be animated: Yes.
• Rx = <长度> , the fillet radius of the rectangle's x-axis, the default value is 0. Whether it can be animated: Yes.
• ry = <长度> , the fillet radius of the rectangular y-axis, the default value is 0. Whether it can be animated: Yes.

Fillet rule:

1. Rx and Ry must be a length value.
2. If the RX and RY are not defined, then they will be set to 0. (So they'll be a sharp-angled rectangle)
3. If only the RX is assigned, the RY is automatically set to the value equal to RX.
4. If the RY is assigned only, then the RX is automatically set to the value equal to Ry.
5. If the value of RX is greater than half of its own width, then it is set to half its width.
6. If the value of RY is greater than half of its height, then it is set to half its height.

DEMO:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">    <rect x="50" y="50" width="200" height="100" fill="#cd5c5c"></rect></svg><svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">    <rect x="50" y="50" rx="15" ry="15" width="200" height="100" fill="#cd5c5c"></rect></svg>

Circle Element

<circle>The element defines a circle.

Property Definition:

• CX = <坐标点> , the x-coordinate of the center of the circle in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• cy = <坐标点> , the y-coordinate of the center point in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• R = <长度> , the radius of the circle. Whether it can be animated: Yes.

Ellipse elements

<ellipse>An ellipse is defined by an element.

Property Definition:

• CX = <坐标点> , the x-coordinate of the center of the circle in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• cy = <坐标点> , the y-coordinate of the center point in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• Rx = <长度> , the x-axis radius of the circle. Whether it can be animated: Yes.
• ry = <长度> , the y-axis radius of the circle. Whether it can be animated: Yes.

DEMO:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">    <circle cx="150" cy="100" r="70" fill="#cd5c5c"></circle></svg>

Line element

<line>element defines a line that is between two points.

Property Definition:

• X1 = <坐标点> , the x-coordinate of the starting point in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• Y1 =, the start of the y-coordinate in the <坐标点> current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• x2 = <坐标点> , the x-coordinate of the end point in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.
• y2 = <坐标点> , the x-coordinate of the end point in the current user coordinate system, the default value is 0. Whether it can be animated: Yes.

Because the line element is a one-dimensional shape in relation to a relationship, it has no intrinsic concept and cannot use attributes on that element fill .

DEMO:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">    <line x1="50" y1="50" x2="250" y2="150" stroke-width="5" stroke="#cd5c5c" /></svg>

Polyline elements

<polyline>The element defines a non-closed shape formed by a number of connected straight line segments.

Property Definition:

• Points = a graphic that is <多组的坐标点> connected by a coordinate point in the points attribute.

DEMO:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">    <polyline fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" /></svg>

Polygon Elements

<polygon>The element defines a closed shape formed by a number of connected straight line segments.

Property Definition:

• Points = <多组的坐标点> , <polyline> same as element, is also a graph connected by a coordinate point in the points attribute, but the starting point is also connected.

DEMO:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">    <polygon fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" /></svg>

SVG Base Graphics