SVG Combat Development Learning (II.)--Basic graphics

"1" segment:<line> element

Basic properties: Two points determines a line segment, so the basic property of a segment is the coordinate of its starting and ending point.

<svg width= "height=" >

<!--Horizontal--

<line x1= "y1=", "x2=" "y2=", style= "Stroke:black"/>

<!--Diagonal--

<line x1= "y1=", "x2=" "y2=", style= "Stroke:black"

<!--vertical line--

<line x1= "y1=" "x2=" "y2=" [style=] Stroke:black

</svg>

"2" common strokes (stroke) Property set

1. The stroke attribute can be added to the "style" attribute as a parameter:

<line x1= "y1=", "x2=" "y2=", style= "Stroke:black"

You can also independently act as a property of a graphic element:

<line x1= "y1=", "x2=" "y2=", stroke= "Black"/>

The effect is the same, the only difference is that when programming with JavaScript, the value and the method used to set the value are not the same.

2, "stroke-width" property

Sets the width of the stroke, with a value of non-negative integer, and the default value is 1. If set to a value of 0, it means that no stroke is done.

3. Stroke-opacity Properties

Sets the transparency of the stroke, and the value range is from 0~1.

4. Stroke-dasharray Properties

Set the stroke using the Linetype, using this parameter can produce dashed lines, dots and other linear effects, the odd digit number represents the length of the real line, the number of even digits represents the length of the gap, so this group of numbers should normally be even digits.

5. Stroke-linecap Properties

Sets the stroke endpoint shape, which can be either "butt" (the default), "Round", or "square"

6. Stroke-linejoin Properties

Sets the excessive shape at the intersection when the stroke encounters a line intersection, which can be either "miter" (the default), "Round", or "bevel".

"3" Rectangle:<rect> Element

X: Represents the x-coordinate of the vertex of the upper-left corner of the rectangle, the default value is 0;

Y: Represents the y-coordinate of the vertex of the upper-left corner of the rectangle, with a default value of 0;

Width: A rectangle that is not negative if it is 0 and does not display the rectangle;

Height: Indicates the height of the rectangle, non-negative, if 0 does not display the rectangle;

Rx: The fillet radius of the x-axis direction of the rounded rectangle, non-negative;

Ry: A fillet radius representing the y-axis direction of the rounded rectangle, non-negative;

"4" Round:<circle> element

Basic properties: A circle can be defined by a circle and a radius.

CX: Represents the x-coordinate of the center point, the default value is 0;

Cy: Represents the Y coordinate of the center point, the default value is 0;

R: Circle radius, non-negative, if 0 does not show the circle;

"5" Oval:<ellipse> Element

Basic properties:

CX: Represents the x-coordinate of the center of the ellipse, the default value is 0;

Cy: Represents the y-coordinate of the center of the ellipse, the default value is 0;

Rx: Indicates the half-axis length of the x-axis direction of the ellipse, non-negative, if 0 does not display the ellipse;

RY: The half-axis length representing the y-axis direction of the ellipse, non-negative, if 0 does not display the ellipse;

"6" Polyline:<polyine> element

You can use the <polyline> element when you need to draw a graphic with more segments, such as a pentagram, a cube, and so on. A polyline is a line of end-to-end lines that can be generated as long as the coordinates of the key point are specified.

Basic properties:

points= "Point coordinate set": Represents a collection of key point coordinates, there are 3 points in the collection format, as shown below, the SVG parser is automatically parsed in different formats.

Note: In the <polylin> element if it is not a closed graphic, it is best to set it to "Fill:none", otherwise it may produce unexpected results.

"7" Polygon:<polygon> element

In SVG, a polygon can be drawn as long as the vertex coordinates of a given polygon, as shown in 5-10.

Basic properties: points= "vertex coordinate set", which represents the collection of vertex coordinates, and the point collection format is the same as <polyline>.

Polygon Area Partial Fill ("Full-rule")

A simple polygon area fill is easy, but if the polygon segment crosses, it is not easy to tell if a point is inside or outside of it, and the fill becomes complicated. SVG provides a "Full-rule" property to determine how a complex path's graph is populated with only 2 values: "Nonzero" (default) and "EvenOdd"

SVG Combat Development Learning (II.)--Basic graphics