SVG 2D strokes and fills in HTML 5

Fill color-fill attribute this attribute uses the set color to fill the image, it is easy to use, directly assign the color value to this attribute. Example: <rect x = "10" y = "10" width = "100" height = "100" stroke = "blue" fill = "red" fill-opacity = "0.5" stroke -opacity = "0.8"/> In the above example, a rectangle with a red and blue edge is drawn. Note: 1. If the fill attribute is not provided, black fill is used by default. To cancel filling, set it to none. 2. You can set the fill transparency, that is, fill-opacity. The value range is 0 to 1. Border color-the stroke attribute has been used in the above example. This attribute uses the set value to draw the border of the image, which is also very direct to use, you can assign the color value to it. Note: 1. If the stroke attribute is not provided, no graphic border is drawn by default. 2. You can set the edge transparency, that is, stroke-opacity. The value range is 0 to 1. In fact, edges are a little more complex than those inside the graph, because edges need to be defined in addition to colors and "shapes. The line endpoint-stroke-linecap attribute defines the style of the Line Segment endpoint, which can use three values: butt, square, and round. Example: <svg width = "160" height = "140"> <line x1 = "40" x2 = "120" y1 = "20" y2 = "20" stroke = "black" stroke-width = "20" stroke-linecap = "butt"/> <line x1 = "40" x2 = "120" y1 = "60" y2 = "60" stroke = ""black" stroke-width = "20" stroke-linecap = "square"/> <line x1 = "40" x2 = "120" y1 = "100" y2 = "100 "stroke =" black "stroke-width =" 20 "stroke-linecap =" round "/> </svg> This Code draws three lines that use different style line endpoints, from the picture on the left, we can easily see the different styles in 3. The connection-stroke-linejoin attribute of a line defines the style of a line segment connection. The attributes can contain three values: miter, round, and bevel. Example: <svg width = "160" height = "280"> <polyline points = "40 60 80 20 120 60" stroke = "black" stroke-width = "20" stroke-linecap = "butt" fill = "transparent" stroke-linejoin = "miter"/> <polyline points = "40 140 80 100 120 140" stroke = "black" stroke-width =" 20 "stroke-linecap =" round "fill =" transparent "stroke-linejoin =" round "/> <polyline points =" 40 220 80 180 120 "stroke =" black" stroke-width = "20" stroke-line Cap = "square" fill = "transparent" stroke-linejoin = "bevel"/> </svg> from the left-side graph, we can easily see the different styles in 3. The line's real-world-stroke-dasharray attribute specifies the actual line used by the line segment. Example: <svg width = "200" height = "150"> <path d = "M 10 75 Q 50 10 100 75 T 190 75" stroke = "black" stroke-linecap =" round "stroke-dasharray =" 5, 10, 5 "fill =" none "/> <path d =" M 10 75 L 190 75 "stroke =" red "stroke-linecap =" round "stroke-width =" 1" stroke-dasharray = "5, 5" fill = "none"/> </svg> This attribute sets column numbers, however, these numbers must be separated by commas. Of course, the attribute can contain spaces, but spaces are not used as separators. Each number defines the length of a real line segment, which repeats in the order of drawing and not drawing. So the line drawn in the example on the left is to draw a solid line of 5 units, leave a space of 5 units, and then draw a solid line of 5 units... this keeps going. In addition to these common attributes, you can also set the following attributes: stroke-miterlimit: This is the same as that in the canvas. It processes the miter effect at the painting and non-linear connections. Stroke-dashoffset: Specifies the position of the dotted line. Using CSS to display data HTML5 reinforces the idea of DIV + CSS, so the data presentation part can be handed over to CSS for processing. Compared with common HTML elements, only background-color and border are replaced with fill and stroke. Most of the others are similar. Let's take a look at an example: # MyRect: hover {stroke: black; fill: blue;} is not very familiar with it, it is so simple.