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

SVG stroke-dasharray虚线边框

2018-8-21 00:11| 作者: admin| 查看: 4073| 评论: 0|来自: 蚂蚁部落

绘制虚线边框是SVG最为基础的技能之一,利用stroke-dasharray属性即可实现。

本文将通过代码实例详细介绍一下stroke-dasharray属性的用法。

首先看一段绘制实线边框的例子:

[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="200">
  <rect x="10" y="10"
    width="100" height="100"
    stroke="red"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/135805n99fro9966xv693y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

默认情况下,绘制图形的边框(描边)都是实心的。

代码分析如下:

(1).stroke:设置边框(描边)颜色。

(2).stroke-width:设置边框(描边)宽度。

(3).fill:设置矩形的填充颜色。

[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="200">
  <rect x="10" y="10"
    width="100" height="100"
    stroke="red"
    stroke-dasharray="10"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/140128vyxcg9pdxykp7z2p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过stroke-dasharray属性实现矩形虚线边框效果。

代码分析如下:

(1).stroke-dasharray属性值是一个数列,既可以是普通数字也可以是百分比。

(2).数值之间可以用逗号或者空格分隔,用来规定短线和缺口的长度。

(3).如果提供了奇数个数值,则数列重复一次,从而变成偶数个数值。

着重分析一下第三条规则:

如果数列内容是"5,3,2",那么数列内容会重复一次,变为"5,3,2,5,3,2"。

由此,上面代码中,stroke-dasharray属性值是"10",最终被处理为"10,10"。

从情理上也很容易理解,如果数列内容是奇数个,那么无法形成虚线规则的循环。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="400" height="600">
  <rect x="10" y="10"
    width="300" height="300"
    stroke="red"
    stroke-dasharray="10,20,30"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

stroke-dasharray="10,20,30"会被转换为stroke-dasharray="10,20,30,10,20,30"。

仔细观察边框的线条和空缺的规律,第一个10规定线条尺寸,那么紧跟的20规定空缺尺寸,以此类推。

当"10,20,30,10,20,30"完全绘制完毕,那么就从头再循环一次,以此类推。


鲜花

握手

雷人

路过

鸡蛋
返回顶部