您的位置:首页> HTML5教程> SVG教程

SVG 设置线条样式

2018-12-3 09:14| 作者: admin| 查看: 1725| 评论: 0|来自: 蚂蚁部落

线条虽然简单,但总归还是要修饰的,毕竟它是图案的构成基础之一。

根据需要进行必要的修饰也是常见的操作,设置线条外观的属性有很多。

下面对常见的几个属性通过代码实例进行一下演示。

一.设置线条颜色与粗细:

通过stroke属性可以设置线条的颜色,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px dotted #ccc;
  margin:50px;
}
</style>
</head>
<body>
<svg width="220" height="80" >
  <line
    x1="0" y1="0"
    x2="200" y2="60"
    stroke-width=1
    stroke="red"/>
</svg>
</body>
</html>

通过stroke-width属性设置线条的粗细,而stroke属性可以设置颜色。

stroke属性值不仅仅是颜色,还可以是图案、渐变等。

更多内容参阅SVG 填充、描边和透明度一章节。

二.设置描边连接处风格:

线条总有相接的时候,就和人总有相逢一个道理。

相逢的感情有不同,比如冷漠、热烈或者欢快,线条相接也是如此。

有时候尖锐,有时候平滑,通过stroke-linejoin属性即可实现设置。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="300" height="300" >
  <polyline 
    points="40 60 80 20 120 60" 
    stroke="black" 
    stroke-width="20"
    fill="transparent" 
    stroke-linejoin="miter" />
  <polyline 
    points="40 140 80 100 120 140" 
    stroke="black" 
    stroke-width="20" 
    fill="transparent" 
    stroke-linejoin="round" />
  <polyline 
    points="40 220 80 180 120 220" 
    stroke="black" 
    stroke-width="20"
    fill="transparent"
    stroke-linejoin="bevel" />
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091619b60451ahmmge8q21.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

stroke-linejoin属性的三个属性值分别对应三种不同的效果。

三.设置直线两端的风格:

默认状态下,直线的两端是平直的,使用stroke-linecap属性可以进行简单的修饰。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="300" height="300" >
  <line 
    x1="20" y1="20" 
    x2="160" y2="20" 
    stroke="black" 
    stroke-width="20" 
    stroke-linecap="butt"/>
  <line 
    x1="20" y1="50" 
    x2="160" y2="50" 
    stroke="black"
    stroke-width="20"
    stroke-linecap="round" />
  <line 
    x1="20" y1="80"
    x2="160" y2="80"
    stroke="black"
    stroke-width="20"
    stroke-linecap="square"/>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091658o3sjh6ldezffbixo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

stroke-linecap三个属性值解析如下:

(1).butt:默认值,直线的两侧是平直的。

(2).square:直线的两端同样是平直的,好像与butt没区别,其实多了一块。

(3).round:直线两端是圆润的帽形,当然尺寸也增加。

增加的尺寸也是有讲究的,尺寸是线条宽度的一半,也就是stroke-width属性值的一半。

四.设置最大斜接长度:

斜接长度指的是在两条描边交汇处内角和外角之间的距离。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091728fh1887m2jr7veaec.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

斜接长度长度就是黄色区域的尺寸。

使用stroke-miterlimit属性可以实现设置斜接最大尺寸的功能,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="300" height="300" >
  <polyline 
    points="40 60 80 20 120 60" 
    stroke="black" 
    stroke-width="20" 
    fill="transparent" 
    stroke-linejoin="miter"
    stroke-miterlimit="2"/>
</svg>
</body>
</html>

特别强调一点,stroke-miterlimit必须和stroke-linejoin="miter"配合使用采有效。

从两个属性的名称也可以猜测到这一点,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091802g5xnq2ssr05h885r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码设置stroke-miterlimit属性值为2(很小的一个值),但是斜接的尺寸挺大的(应该远大于2px),但是为什么整个斜接能完整显示呢。这里一定要特别注意了,stroke-miterlimit属性值这个数字的单位不是像素,而是相对stroke-width属性值的一个倍数,所以上述代码实际设置的斜接最大2*20=40,如果斜接尺寸超出的部分将会被裁切。

五.设置虚线与偏移:

还可以设置线条的虚线与偏移效果,考虑到文章的篇幅问题,本文不做介绍。

具体参阅如下两篇文章:

(1).设置虚线具体参阅SVG stroke-dasharray虚线边框一章节。

(2).设置虚线边框偏移量具体参阅SVG stroke-dashoffset边框偏移一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部