一篇文章带你了解SVG填充属性

SVG形状的填充定义了形状在其轮廓内的颜色。换句话说，SVG形状的表面。填充是您可以为任何SVG形状设置的基本SVGCSS属性之一。1.FillSVG图形的填充是图形轮廓内的填充。定义一个具有蓝色(#0000ff)填充颜色但没有描边颜色的圆。运行效果：2.填充和描边的例子你可以结合SVG描边和填充颜色用于SVG形状。该示例使用深蓝色(#000066)描边颜色和浅蓝色(#3333ff)填充颜色定义了一个圆。运行效果：1.fill-opacitySVGCSS属性fill-opacity用于设置shape填充颜色的不透明度。fill-opacity取一个介于0和1之间的值。该值越接近0，填充越透明。该值越接近1，填充越不透明。默认的fill-opacity值为1，这意味着填充颜色是完全不透明的。这是一个SVG填充不透明度示例，其中两个圆圈具有不同的（填充不透明度）：示例WorldBehindedaLook运行效果：请注意右边圆圈后面的文字比文字更显眼在左圆圈后面。那是因为右圆比左圆具有更高的填充不透明度。2.fill-ruleFill-rule决定了复杂形状的填充方式。填充规则可以采用两个不同的值。这些值是：2.1nonzero一般来说，这两个值是决定一个形状的内外形状的规则。只填充内部，这对于圆形来说很简单，但对于更复杂的形状就不那么容易了。示例代码分析：两个路径例子有每条线有8条线，每条线都画成一个菱形，其中较大的菱形包含较小的菱形。在左侧路径中，内部菱形是从左到右（顺时针）绘制的。在右侧路径中，内部菱形是从右向左（逆时针方向）绘制的。这是使用填充规则绘制时的结果图像：非零。2.2evenodd下面是相同的路径示例，使用fill-rule:evenodd。示例运行后的图像效果：注：Evenodd的字面意思是“奇数或偶数”。根据这个规则：判断一个点是否在图中，从该点向任意方向做一条射线，然后检测这条射线与图路径的交点个数。从一点到任意方向无穷远画一条线（射线）。每次路径穿过射线时，计数器都会增加。如果总数是偶数，则点在外面。如果总数是奇数，则点在形状内部。3.小结本文基于Html基础，讲解SVG中的fill属性。对于fill属性中的常用属性，fill-opacity、fill-rule、stroke属性。通过对案例的分析和描述，进行了详尽的讲解，并通过丰富的案例运行效果图直观地看到了结果，可以帮助读者更好地理解。代码很简单，希望对大家学习有所帮助。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。