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

SVG <path> 路径元素

2019-4-18 16:01| 作者: admin| 查看: 985| 评论: 0|来自: 蚂蚁部落

SVG具有强大的绘图能力,为了使用方便,内置了很多图形元素。

比如<polygon>可以绘制多边形,<ellipse>可以绘制椭圆,<rect>可以绘制矩形。

应用非常的方便,但是上述元素有一个共同的缺点,那就是图形固定,不能灵活绘制。

实际项目中,所需要的图形是多种多样的,于是<path>路径元素的优势得到体现。

利用它可以绘制任意形状的图形,简单代码演示如下:

[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="300">
    <path 
      fill="#FFFFFF" 
      stroke="#000000" 
      stroke-width="4" 
      d="M66.039,133.545 
         c0,0-21-57,18-67
         s49-4,65,8
         s30,41,53,27
         s66,4,58,32
         s-5,44,18,57
         s22,46,0,45
         s-54-40-68-16
         s-40,88-83,48
         s11-61-11-80
         s-79-7-70-41
         C46.039,146.545,53.039,128.545,66.039,133.545
         z" />
</svg>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/18/160147egjt2fea5ytymz2c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过<path>元素绘制一个曲折复杂的图形,体现了此元素的强大功能。

当然我们也不能想象完全依靠手写参数的方式绘制更为复杂庞大的图形,可以使用一些工具辅助。

首先对<path>元素的主要属性简单介绍如下:

(1).fill:此属性规定路径的填充颜色。

(2).stroke:此属性规定路径的描边颜色,也就是路径的边框颜色。

(3).fill-rule:此属性规定路径的填充规则,具体参阅canvas 非零绕组规则与奇偶规则一章节。

(3).d:此属性用于规定路径的具体绘制规则,从上述代码来看确实比较复杂。

下面通过一段更为简短的代码简单分析一下d属性的用法:

[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="300">
      <path 
        d="M50,50
           l150,50"
        stroke="red"
        fill="none"
        stroke-width="1"/> 
</svg>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/18/160215ms6cmm1cz0mw2zmw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过<path>路径元素绘制一条斜线,极为简单,目的是为了介绍d属性,分析如下:

(1).d属性值是两个图形绘制命令,分别以字母开头。

(2).每一组命令中的参数用逗号分隔,命令与命令之间可以用空格或者换行分隔。

(3).M是Move to的缩写,表示将笔触移动到指定坐标,也就是从指定位置开始绘制。

(4).L是Line的缩写,表示绘制一条直线,L后面的参数表示直线的终点坐标。

(5).命令区分大小写,这一点需要特别注意,大写表示绝对坐标,小写表示相对坐标。

(6).绝对坐标表示以坐标系原点(0,0)为参考点,相对坐标表示当前坐标值相对上一个控制点坐标的变化。

对上述代码的坐标分析如下:

(1).M50,50:M是大写,说明是绝对坐标,相对于当前用户坐标系原点进行定位。

(2).l150,50:l是小写,相对的是M50,50,此点的绝对坐标位置就是(50+150,50+50)。

<path>路径命令众多,考虑到篇幅问题,文本不再逐一进行详细介绍,具体可以参阅本教程相关文章。

主要命令列表如下:

(1).M(m):将画笔移动到点指定坐标。

(2).L(l):绘制一条直线。

(3).H(h):绘制一条水平线段。

(4).V(v):绘制一条垂直线段。

(5).A(a):绘制一段圆弧。

(6).C(c):绘制三次赛贝尔曲线。

(7).S(s):特殊版本的三次赛贝尔曲线。

(8).Q(q):绘制二次赛贝尔曲线。

(9).T(t):绘制特殊版本二次赛贝尔曲线。

(10).Z(z):绘制闭合图形,如果不指定z命令,那么不是绘制闭合图形,而是绘制线段。


鲜花

握手

雷人

路过

鸡蛋
返回顶部