Home > Article > Web Front-end > HTML5 SVG 2D Introduction 4—Stroke and Fill_html5 Tutorial Skills
Earlier we focused on summarizing various shapes, texts and pictures. Next, we will summarize the color processing, that is, the fill and border effects, just like we discussed canvas. You will find that the content here is basically the same as that of canvas. Consistent. These attributes can be written in the element as attributes or saved in CSS (this is different from canvas).
Fill color - fill attribute
This attribute uses the set color to fill the inside of the graphic. It is very simple to use. Just assign the color value to this attribute directly. Look at the example:
Border color - stroke attribute
The stroke attribute has been used in the above example. This attribute uses the set value to draw the border of the graphic. It is also very straightforward to use. Just assign the color value to it. Note:
1. If the stroke attribute is not provided, the graphic border will not be drawn by default.
2. You can set the transparency of the edge, which is stroke-opacity. The value range is 0 to 1.
Actually, the edge situation is a little more complicated than inside the graph, because in addition to the color, the edge also has a "shape" that needs to be defined.
Endpoint of the line - stroke-linecap attribute
This attribute defines the style of the endpoint of the line segment. This attribute can use butt, square, round Three values. Look at the example:
This code draws 3 lines using different style line endpoints,
From the picture on the left, we can easily see the differences in the 3 styles.
Line connection - stroke-linejoin attribute
This attribute defines the style of the line segment connection. This attribute can use three miter, round, bevel value. Look at the example:
From the picture on the left, we can easily see the difference in the 3 styles.
The virtual and solid line - stroke-dasharray attribute
This attribute can set the virtual and solid line used for the line segment. Look at the example:
This attribute sets a series of numbers, but these numbers must be separated by commas.
Attributes can of course contain spaces, but spaces do not serve as separators. Each number
defines the length of the solid line segment, which is cycled in the order of drawing and not drawing.
So the line drawn in the example on the left is a solid line of 5 units, leaving 5 units of space,
Draw another 5 units of solid line...and continue like this.
In addition to these commonly used attributes, there are also the following attributes that can be set:
stroke-miterlimit: This is the same as in canvas. It handles the miter effect at the connection between when drawing and not drawing lines. .
stroke-dashoffset: This attribute sets the position where the dashed line starts to be drawn.
Use CSS to display data
HTML5 strengthens the idea of DIV CSS, so the data display part can also be left to CSS. Compared with ordinary HTML elements, it is just that background-color and border are replaced by fill and stroke. Most others are pretty much the same. Let’s take a simple example:
Practical reference:
Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Development Center: https://developer.mozilla.org/en/SVG
Popular Reference: http://www.chinasvg.com/
Official documentation: http://www.w3.org/TR/SVG11/