如何掌握HTML5 SVG中的笔画与填充技巧？_产品资讯

发布时间:2024-10-15 17:02

阅读量:0

HTML5的SVG 2D入门4主要讲解了笔画与填充的概念，包括如何使用不同的颜色、线宽和样式来绘制图形的轮廓（笔画），以及如何为图形的内部区域填充颜色或图案。

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

笔画与填充

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

填充色 fill属性

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

 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="red" fillopacity="0.5" strokeopacity="0.8"/>

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

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

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

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

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

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

边框色 stroke属性

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

 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="red" fillopacity="0.5" strokeopacity="0.8"/>

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

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

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

线的端点 strokelinecap属性

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

 <svg width="160" height="140">   <line x1="40" x2="120" y1="20" y2="20" stroke="black" strokewidth="20" strokelinecap="butt"/>   <line x1="40" x2="120" y1="60" y2="60" stroke="black" strokewidth="20" strokelinecap="square"/>   <line x1="40" x2="120" y1="100" y2="100" stroke="black" strokewidth="20" strokelinecap="round"/> </svg>

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

线的连接 strokelinejoin属性

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

 <svg width="160" height="280">   <polyline points="40 60 80 20 120 60" stroke="black" strokewidth="20" strokelinecap="butt" fill="transparent" strokelinejoin="miter"/>   <polyline points="40 140 80 100 120 140" stroke="black" strokewidth="20" strokelinecap="round" fill="transparent" strokelinejoin="round"/>   <polyline points="40 220 80 180 120 220" stroke="black" strokewidth="20" strokelinecap="square" fill="transparent" strokelinejoin="bevel"/> </svg>

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

线的虚实 strokedasharray属性

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

 <svg width="200" height="150">   <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" strokelinecap="round" strokedasharray="5,10,5" fill="none"/>   <path d="M 10 75 L 190 75" stroke="red" strokelinecap="round" strokewidth="1" strokedasharray="5,5" fill="none"/> </svg>

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

使用CSS展示数据

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

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

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

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：定义线条的虚线模式。

示例代码：

 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">   <line x1="10" y1="10" x2="190" y2="190" stroke="red" strokewidth="5" strokelinecap="round" /> </svg>

填充（Fill）

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

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

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

示例代码：

 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">   <rect x="10" y="10" width="180" height="180" fill="blue" fillopacity="0.5" /> </svg>

结合使用笔画与填充

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

 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">   <rect x="10" y="10" width="180" height="180" stroke="green" strokewidth="3" fill="yellow" fillopacity="0.5" /> </svg>

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

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