Detailed introduction to SVG 2D strokes and fills in HTML5

                                                                                                                                                                              Please indicate the source when reprinting: SVG 2D strokes and fills in HTML5

Fill color - fill attribute

This attribute uses the set color to fill the interior of the graphic. It is very simple to use. Just assign the color value to this attribute directly. Look at the example:

<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 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 the fill, you need to set it to none.

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

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. Notice:

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 property

This attribute defines the style of the endpoints of the line segment. This attribute can use three values: butt, square, and round. Look at the example:

<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 3 lines using different style line endpoints. We can easily see the difference in the 3 styles from the picture on the left.

Line connection - stroke-linejoin attribute

This attribute defines the style of the line segment connection. This attribute can use three values: miter, round, and bevel. Look at the example:

<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 differences in the 3 styles.

The virtual and real lines - stroke-dasharray attribute

This attribute can set what kind of virtual and solid line the line segment uses. Look at the example:

<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>

这个属性是设置一些列数字，不过这些数字必须是逗号隔开的。属性中当然可以包含空格，但是空格不作为分隔符。每个数字定义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。所以左面的例子中绘制的线是画5单位的实线，留5单位的空格，再画5单位的实线...这样一直下去。除了这些常用的属性，还有下列属性可以设置：

stroke-miterlimit：这个和canvas中的一样，它处理什么时候画和不画线连接处的miter效果。

stroke-dashoffset：这个属性设置开始画虚线的位置。

 

使用CSS展示数据

HTML5强化了p+CSS的思想，所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比，只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子：

#MyRect:hover {  
   stroke: black;  
   fill: blue;  
 }

是不是很熟悉，就是这么简单的。

以上就是HTML5中SVG 2D笔画与填充的详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！