SVG 设置线条样式

2018-2-6 02:35| 发布者: admin| 查看: 751| 评论: 0|来自: 钱柜手机网页版

使用stroke属性可以设置图形元素的描边效果,具体可以参阅SVG 填充、描边和透明度设置一章节。

除了设置描边的颜色和宽度之外,还可以进一步进行设置。

一.stroke-linejoin属性:

此属性用来设置描边连接处的风格,具有三个属性值:

(1).miter:默认值,创建尖角。

(2).round:创建斜角。

(3).bevel:创建圆角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px solid blue;
  margin:50px;
}
</style>
</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>

二.stroke-linecap属性:

此属性规定描边末端的风格,具有三个属性值:

(1).butt:默认值,描边末端是平直边缘。

(2).square:向描边末端添加圆形线帽。

(3).round:向描边末端添加正方形线帽。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px solid blue;
  margin:50px;
}
</style>
</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>

butt和square在外观上没有区别,但是尺寸要多出一块(多出的这块尺寸是描边宽度的一半)。

三.stroke-miterlimit属性:

此属性设置最大斜接长度,默认值是10。

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

图示如下:

1.gif

特别说明:只有当lineJoin属性为"miter"时,stroke-miterlimit属性才有效。

边角的角度越小,斜接长度就会越大。

如果斜接长度超过miterLimit的值,边角会以lineJoin的"bevel"类型来显示。

图示如下:

2.gif

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px solid blue;
  margin:50px;
}
</style>
</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="1"/>
  
  <polyline
            points="40 140 80 100 120 140"
            stroke="black"
            stroke-width="20"
            fill="transparent"
            stroke-linejoin="miter"
            stroke-miterlimit="2"/>
 
</svg>
</body>
</html>

stroke-miterlimit设置实际斜接长度为描边宽度的整数倍数,即使属性值是小数(例如1.4),实际表现也是边框宽度的整数倍。如果原来斜接长度大于我们设置的长度,那么超出的将会被截掉。

四.stroke-dasharray属性:

用来将描边设置为虚线,本章节不做介绍,具体参阅SVG stroke-dasharray虚线边框一章节。

五.stroke-dashoffset属性:

设置虚线边框的便宜量,本章节不做介绍,具体参阅SVG stroke-dashoffset边框偏移一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部