HTML5 SVG 2D entry 4-strokes and filling

Comments: Color processing, that is, filling and border effects. You will find that the content here is basically the same as that of canvas. These attributes can be written into elements in the form of attributes or saved as CSS, which is different from canvas.

In the previous sections, we focused on summarizing various shapes, texts, and images. Next, we will summarize the color processing, that is, filling and border effects, just like the canvas; you will find that the content here is basically the same as that of canvas. These attributes can be written into elements in the form of attributes or saved as CSS (different from canvas ).
Fill color-fill attribute
This attribute fills the image with the set color. It is easy to use. You can directly assign the color value to this attribute. Example:

The Code is as follows:
<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. Notes:
1. If noFillProperty, black fill is used by default. To cancel filling, you must set it to none.
2. You can set the fill transparency, that isFill-opacityThe value range is 0 to 1.
3. What's a little more complicated isFill-ruleAttribute. This attribute defines the algorithm for determining whether a vertex belongs to the filling range. In addition to the inherit value, there are two values:

Nonzero: The algorithm used for this value is to transmit a line from the point to be determined to any direction, and then calculate the trend at the intersection of the graph and the line segment. The calculation result starts from 0, each line segment at the intersection is left to right, and 1 is added; each line segment at the intersection is from right to left, and 1 is subtracted; after all the intersections are calculated, if the calculation result is not equal to 0, the vertex is in the graph and needs to be filled. If the value is equal to 0, the vertex is outside the graph and does not need to be filled. See the following example:

Evenodd: The algorithm used for this value is to transmit a line from the point to be determined to any direction, and then calculate the number of intersection points between the graph and the line segment. If the number is odd, the point is changed to the graph and needs to be filled; if the number is an even number, the point is placed outside the graph and does not need to be filled. Example:

Border color-stroke attributes
In the above example, the stroke attribute has been used. This attribute uses the set value to draw the border of the image. It is also very straightforward to use. You can assign the color value to it. Note:
1. If noStrokeBy default, no graphic border is drawn.
2. You can set the edge transparency, that isStroke-opacityThe 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.

Line endpoint-stroke-linecap attribute
This attribute defines the style of the Line Segment endpoint, which can be usedButt, square, roundThree values. Example:

The Code is as follows:
<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.

Line connection-stroke-linejoin attribute
This attribute defines the style of the Line Segment connection, which can be usedMiter, round, bevelThree values. Example:

The Code is as follows:
<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 220" stroke = "black" stroke-width = "20"
Stroke-linecap = "square" fill = "transparent" stroke-linejoin = "bevel"/>
</Svg>

From the picture on the left, we can easily see the different styles in 3.

Line's real-world-stroke-dasharray attributes
This attribute can be used to set the actual line used by a line segment. Example:

The Code is as follows:
<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, but 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 the actual line segment, which repeats in the order of drawing and not drawing.

In the example on the left, the line drawn is a solid line of 5 units, leaving 5 units of space,

Draw a solid line of 5 units.

In addition to these common attributes, you can set the following attributes:
Stroke-miterlimit: This is the same as that in the canvas. It deals with the miter effect when to draw and do not draw lines.
Stroke-dashoffset: Set the position of the dotted line.

Display data with CSS
HTML5 reinforces the idea of DIV + CSS, so the part of data presentation 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 look at an example:

The Code is as follows:
# MyRect: hover {
Stroke: black;
Fill: blue;
}

Is it that simple.

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/