Before, we focused on summarizing various shapes, texts and pictures. Next, we will summarize the color processing, that is, the filling and border effects, as we discuss canvas. You will find that the content here is basically the same as canvas. These properties can be written in elements as attributes or stored in CSS (this is different from canvas).
Fill color - fill attribute This property uses the set color to fill the inside of the figure. It is very simple to use. Just assign the color value to this property directly. See example:<rect x="10" y="10" stroke="blue" fill="red"
fill-opacity="0.5" stroke-opacity="0.8"/>
In the example above, a red and blue rectangle is drawn. A few points to note:
1. If the fill attribute is not provided, black fill will be used by default. If you want to cancel the fill, you need to set it to none.
2. You can set the transparency of the fill, that is, fill-opacity , and the value range is 0 to 1.
3. A slightly more complicated one is the fill-rule attribute. This property defines an algorithm that determines whether the point belongs to the fill range; in addition to inherit, there are two values:
nonzero : The algorithm used for this value is to emit lines from the point that needs to be judged to any direction, and then calculate the direction of the intersection point between the figure and the line segment; the calculation result starts from 0, and every line segment at an intersection is from left to right, add 1; every line segment at an intersection is from right to left, subtract 1; after calculating all intersection points in this way, if the result of this calculation is not equal to 0, the point is in the figure and needs to be filled; if the value is equal to 0, it does not need to be filled outside the figure. See the following example: evendd : The algorithm used for this value is to emit lines from the point that needs to be judged to any direction, and then calculate the number of points at which the figure and the line segment intersect. If the number is odd, the point is changed into the figure and needs to be filled; if the number is even, the point is outside the figure and does not need to be filled. See the example in the figure below: Border color - stroke attribute The above example has used the stroke attribute. This attribute uses the set value to draw the border of the figure, which is also very direct to use. Just assign the color value to it. Notice:1. If the stroke attribute is not provided, the graph border is not drawn by default.
2. You can set the transparency of the edge, which is stroke-opacity , and the value range is 0 to 1.
In fact, the situation of edges is slightly more complicated than the inside of the graph, because in addition to color, edges also have shapes that need to be defined.
Endpoint of line - stroke-linecap property
This property defines the style of the endpoint of the line segment. This property can use three values butt, square, and round . See example:<svg>
<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 3 lines using different styles of line endpoints.
From the picture on the left we can easily see the difference in styles in 3.
Line connection - stroke-linejoin attribute This property defines the style at the connection of line segments. This property can use the three values of miter, round, and bevel . See example:<svg>
<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 difference in style in 3.
The virtual and real line - stroke-dasharray attribute
This property can set the virtual and real lines of the line segment. See example:<svg>
<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 property sets some columns of numbers, but these numbers must be comma separated.
Of course, spaces can be included in the attribute, but spaces are not used as delimiters. Each number
The length of the solid line segment is defined, and it is cycled in the order of drawing and not drawing.
So the line drawn in the example on the left is a solid line with 5 units, leaving spaces with 5 units.
Draw 5 units of solid lines...and continue like this.
In addition to these commonly used properties, the following properties can be set:
stroke-miterlimit : This is the same as in canvas, which handles the miter effect at the connection between when and if the line is drawn. stroke-dashoffset : This property sets the position where the dotted line starts to be drawn. Use CSS to display data HTML5 strengthens the idea of DIV+CSS, so the part that displays the data can also be handed over to CSS for processing. Compared with ordinary HTML elements, it is just background-color and border replaced by fill and stroke. Most of the others are similar. Let's take a brief example:#MyRect:hover {
stroke: black;
fill: blue;
}
Isn't it very familiar? It's 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
Popular reference: http://www.chinasvg.com/
Official document: http://www.w3.org/TR/SVG11/