以下是关于HTML5 SVG 2D入门4—笔画与填充的详细介绍：

笔画与填充

在HTML5的SVG中，颜色处理包括填充和边框效果，这些属性既可以以属性的形式写在元素中，也可以以CSS的形式保存，这是与Canvas不一样的地方。

填充色 fill属性

fill属性用于设置图形内部的填充颜色，使用非常简单，直接将颜色值赋给该属性即可。

上述代码绘制了一个红色填充、蓝色边框的矩形，注意以下几点：

1、默认填充：如果不提供fill属性，则默认使用黑色填充，若要取消填充，需设置为none。

2、透明度：可以设置填充的透明度，通过fillopacity属性，其值的范围是0到1。

3、填充规则：稍微复杂一点的是fillrule属性，定义了判断点是否属于填充范围的算法，有两个取值：

nonzero：从需要判定的点向任意方向发射线，然后计算图形与线段交点的走向；计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；如果计算结果不等于0，则该点在图形内，需要填充；如果结果等于0，则在图形外，不需要填充。

evenodd：从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数；如果交点个数为奇数，则该点在图形内，需要填充；如果为偶数，则该点在图形外，不需要填充。

边框色 stroke属性

stroke属性用于绘制图形的边框，使用起来也很直接，将颜色值赋给它即可。

上述代码绘制了一个带有蓝色边框的矩形，注意以下几点：

1、默认边框：如果不提供stroke属性，则默认不绘制图形边框。

2、透明度：可以设置边框的透明度，通过strokeopacity属性，其值的范围是0到1。

线的端点 strokelinecap属性

strokelinecap属性定义了线段端点的风格，可以使用butt, square, round三个值。

上述代码绘制了三条使用不同风格线端点的线。

线的连接 strokelinejoin属性

strokelinejoin属性定义了线段连接处的风格，可以使用miter, round, bevel三个值。

上述代码绘制了三条使用不同风格线连接处的线。

线的虚实 strokedasharray属性

strokedasharray属性可以设置线段采用何种虚实线。

上述代码绘制了两条使用不同虚实风格的线。

使用CSS展示数据

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

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

上述代码展示了一个矩形在鼠标悬停时改变填充和描边颜色的效果。

相关FAQs

问题一：如何在SVG中使用CSS来控制填充和描边的颜色？

答：可以在CSS中通过选择器来控制SVG元素的填充和描边颜色。

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

这个CSS规则表示当鼠标悬停在id为MyRect的SVG元素上时，描边颜色变为黑色，填充颜色变为蓝色。

问题二：如何设置SVG元素的透明度？

答：可以通过设置fillopacity（填充透明度）和strokeopacity（描边透明度）属性来控制SVG元素的透明度，这两个属性的值范围都是0到1，其中0表示完全透明，1表示完全不透明。

这段代码中的矩形具有50%的填充透明度和80%的描边透明度。

HTML5 SVG 2D入门教程系列（四）：笔画与填充

SVG（可缩放矢量图形）是HTML5中用于绘制矢量图形的一种技术，在SVG中，我们可以通过定义形状、路径、颜色等来创建复杂的图形，本节将介绍SVG中的笔画与填充相关的基本概念和用法。

SVG画布基础

在开始学习笔画与填充之前，我们需要了解SVG画布的基础知识。

SVG元素：是SVG的根元素，定义了SVG图形的区域。

坐标系：SVG图形是在一个二维坐标系中绘制的，其中原点位于左上角。

单位：SVG使用CSS中的长度单位，如px、em、rem等。

笔画（Stroke）

笔画是SVG中用于绘制图形边界的线，以下是一些与笔画相关的属性：

stroke：定义图形边界的颜色。

strokewidth：定义图形边界的宽度。

strokelinecap：定义线条端点的形状，如“butt”、“round”、“square”等。

strokelinejoin：定义线条交点的形状，如“miter”、“round”、“bevel”等。

strokedasharray：定义线条的虚线模式。

示例代码：

填充（Fill）

填充是指图形内部的颜色，以下是一些与填充相关的属性：

fill：定义图形内部的填充颜色。

fillopacity：定义填充颜色的透明度。

示例代码：

结合使用笔画与填充

在实际应用中，我们经常需要结合使用笔画和填充来创建复杂的图形，以下是一个示例：

在这个例子中，我们创建了一个矩形，它的边框颜色为绿色，宽度为3，内部填充颜色为黄色，透明度为50%。

本节介绍了SVG中的笔画与填充的基本概念和用法，通过学习这些属性，我们可以创建出具有丰富视觉效果和交互性的矢量图形，在后续的学习中，我们将继续探索SVG的更多高级特性。