Shulou(Shulou.com)06/03 Report--

How to use strokes and fills in HTML5 SVG, for this problem, this article details the corresponding analysis and solutions, hoping to help more friends who want to solve this problem find a simpler and easier way.

We focused on summarizing shapes, text, and images, but we're going to summarize color processing, that is, fill and border effects, just like we discussed canvas; you'll find that the content here is basically the same as canvas. These attributes can be written either as attributes in the element or as CSS (unlike canvas).

Fill- fill attribute

This property fills the interior of the graph with the color set. It is very simple to use. You can assign the color value directly to this property. See examples:

The code is as follows:

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

1. If the fill attribute is not provided, black fill will be used by default, if you want to cancel fill, you need to set it to none.

2. You can set the transparency of the fill, which is fill-opacity, with values ranging from 0 to 1.

3. A little more complicated is the fill-rule attribute. This property defines the algorithm for determining whether a point belongs to the filling range; in addition to the value inherit, there are two values: nonzero: the algorithm used for this value is: emit a line from the point to be determined to any direction, and then calculate the trend of the intersection of the graph and the line segment; the calculation result starts from 0, and every line segment at the intersection is from left to right, plus 1; every line segment at the intersection is from right to left, minus 1; After calculating all intersections in this way, if the result of this calculation is not equal to 0, then the point is inside the graph and needs to be filled; if the value is equal to 0, then it is outside the graph and does not need to be filled.

evenodd: The algorithm used for this value is to emit lines from the points to be determined to any direction, and then calculate the number of intersections between the graph and the line segment. If the number is odd, the points are changed to be inside the graph and need to be filled; if the number is even, the points are outside the graph and do not need to be filled.

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 graph. It is also very straightforward to use. Just assign the color value to it. Note:

1. If the stroke attribute is not provided, the drawing border is not drawn by default.

2. You can set the transparency of edges, which is stroke-opacity, with values ranging from 0 to 1.

In fact, the situation with edges is a little more complicated than inside the graph, because edges have a "shape" to define in addition to color.

End of line- stroke-linecap property

This property defines the style of the end point of the line segment. This property can take three values: butt,square,round. See examples:

The code is as follows:

This code draws three lines with different style line endpoints,

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

line join- stroke-linejoin property

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

The code is as follows:

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

line's virtual and real- stroke-dasharray properties

This property sets which line segments are to be drawn as solid or dashed lines. See examples:

The code is as follows:

This property sets a list of numbers, but these numbers must be comma-separated.

Properties can of course contain spaces, but spaces are not used as separators. each digital

Define the length of the real line segment, respectively, according to the drawing, not drawing this order cycle down.

So the line drawn in the example on the left is a solid 5-unit line with 5-unit spaces,

Draw a solid line of 5 units... And so on.

In addition to these common attributes, the following attributes can be set:

stroke-miter limit: This is the same as in canvas, dealing with miter effects when lines are drawn and when lines are not drawn.

stroke-dash offset: This property sets the position where the dashed line begins.

Display data using CSS

HTML5 reinforces the idea of DIV+CSS, so the presentation of data can also be handled by CSS. Compared to normal HTML elements, it's just background-color and border replaced by fill and stroke. Most of the others are similar. A simple example:

The code is as follows:

#MyRect:hover {

stroke: black;

fill: blue;

}

Is it familiar? It's that simple.

About HTML5 SVG how to use strokes and fill the answer to the question shared here, I hope the above content can have some help for everyone, if you still have a lot of doubts not solved, you can pay attention to the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.