填充和边框

您所在的位置:网站首页 SVGLC 填充和边框

填充和边框

2024-07-03 12:58| 来源: 网络整理| 查看: 265

除了颜色属性,还有其他一些属性用来控制绘制描边的方式。

xml

stroke-width属性定义了描边的宽度。注意,描边是以路径为中心线绘制的,在上面的例子里,路径是粉红色的,描边是黑色的。如你所见,路径的每一侧都有均匀分布的描边。

第二个影响描边的属性是stroke-linecap属性,如上所示。它控制边框终点的形状。

stroke-linecap属性的值有三种可能值:

butt用直边结束线段,它是常规做法,线段边界 90 度垂直于描边的方向、贯穿它的终点。 square的效果差不多,但是会稍微超出实际路径的范围,超出的大小由stroke-width控制。 round表示边框的终点是圆角,圆角的半径也是由stroke-width控制的。

还有一个stroke-linejoin属性,用来控制两条描边线段之间,用什么方式连接。

xml

每条折线都是由两个线段连接起来的,连接处的样式由stroke-linejoin属性控制,它有三个可用的值,miter是默认值,表示用方形画笔在连接处形成尖角,round表示用圆角连接,实现平滑效果。最后还有一个值bevel,连接处会形成一个斜接。

最后,你可以通过指定stroke-dasharray属性,将虚线类型应用在描边上。

xml

stroke-dasharray属性的参数,是一组用逗号分割的数字组成的数列。注意,和path不一样,这里的数字必须用逗号分割(空格会被忽略)。每一组数字,第一个用来表示填色区域的长度,第二个用来表示非填色区域的长度。所以在上面的例子里,第二个路径会先做 5 个像素单位的填色,紧接着是 5 个空白单位,然后又是 5 个单位的填色。如果你想要更复杂的虚线模式,你可以定义更多的数字。第一个例子指定了 3 个数字,这种情况下,数字会循环两次,形成一个偶数的虚线模式(奇数个循环两次变偶数个)。所以该路径首先渲染 5 个填色单位,10 个空白单位,5 个填色单位,然后回头以这 3 个数字做一次循环,但是这次是创建 5 个空白单位,10 个填色单位,5 个空白单位。通过这两次循环得到偶数模式,并将这个偶数模式不断重复。

另外还有一些关于填充和边框的属性,包括fill-rule,用于定义如何给图形重叠的区域上色;stroke-miterlimit,定义什么情况下绘制或不绘制边框连接的miter效果;还有stroke-dashoffset,定义虚线开始的位置。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3