SVG 2D strokes and padding __html in HTML 5

Fill Color-Fill property

This property fills the interior of the graphic with the color set, and is simple enough to assign the color value to this property. See Example:

<rect x= "y=" width= "height=" stroke= "Blue" fill= "red" fill-opacity= "0.5" stroke-opacity= "0.8"/& Gt

In the example above, a rectangle with a red and blue border is drawn. Note Some points:

1. If you do not provide the Fill property, a black fill is used by default, and none is required if you want to cancel the fill.

2. You can set the transparency of the fill, which is fill-opacity, and the range of values is 0 to 1.

Border Color-stroke property

The above example has already used the stroke property, this property uses the set value to draw the graph border, uses is also very direct, assigns the color value to it to be possible. Attention:

1. If you do not provide the stroke property, the graphic border is not drawn by default.

2. You can set the transparency of the edge, that is stroke-opacity, the value range is 0 to 1.

In fact, the edge is slightly more complex than the interior of the graphic, because the edges are in addition to the color and "shape" needs to be defined.

End of line-Stroke-linecap property

This property defines the style of the segment endpoint, which can use Butt,square,round three values. See Example:

<svg width= "160" height= "140" > <line x1= "" x2= "," y1= "," and "y2=" stroke= "Black" stroke-width= "stroke-" linecap= "Butt"/> <line x1= "x2=" y1= "," y2= "", "Black" stroke= "," stroke-width= "Square" /> <line x1= "x2=" "y1=" y2= "" stroke= "Black" stroke-width= "" stroke-linecap= "Round"/> </sv G>

This code draws 3 lines that use different style line endpoints.

From the picture on the left we can easily see the difference in style 3.

Line Connection-Stroke-linejoin property

This property defines the style of the line segment connection, which can use miter,round,bevel three values. See Example:

<svg width= "160" height= "280" > <polyline "points=" "Black" stroke= "s" troke-linecap= "Butt" fill= "Transparent" stroke-linejoin= "miter"/> <polyline points= "140" Troke= "BLACK" stroke-width=