SVG basics | draw SVG straight lines, line lines, and polygon-

This article describes the basic knowledge of html5svg. This article describes how to draw SVG straight lines, line and polygon, and some related knowledge .,. SVG basics | draw SVG straight lines, line lines, and polygon

SVG straight line

SVG An element is used to draw a line. The following is an example of creating a straight line.

The returned results of the code above are as follows:

The x1 and y1 attributes are used to specify the start point of a straight line, and the x2 and y2 attributes are used to specify the end point of a straight line. You can use the style attribute to set the color and stroke width for the line.

SVG line

The element is used to draw an SVG line. A broken line is a line connecting multiple connections. See the following example:

The returned results of the code above are as follows:

A line is defined by multiple points. Each vertex has the x and y attributes. The preceding example contains three vertices, which constitute a triangle. These three points are connected in a straight line and filled. The default fill color is black. The following example uses the fill color for filling.

You will find that only two sides of the triangle are filled with the stroke color, because only the lines between two points are drawn using the stroke color. No point in the above Code points to the starting point. If you need to draw all three edges, you also need a point to the starting position.

Like SVG straight lines, you can use the style attribute to set the color and stroke width for the line.

SVG Polygon

Element is used to draw SVG polygon. A polygon is a ry with three or more edges. Let's look at the following example of an SVG triangle:

Use Element. Although there are only three vertices, you will find that all three edges are drawn. This is because The element draws all straight lines between points, including the line from the last point to the first point. This is Element and code> The unique difference between elements.

We can plot the ry of more edges. Below is an example of an octagonal structure:

The above is the basis of SVG | the content of drawing SVG straight lines, broken lines, and polygon. For more information, see PHP Chinese Network (www.php1.cn )!