SVG <path>路径元素

2018-2-4 10:01| 发布者: admin| 查看: 786| 评论: 0|来自: 钱柜手机网页版

本章节通过代码实例简略介绍一下它的使用总体语法。

具体路径的语法会在各自的章节介绍,先看一段代码实例:

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

上面的代码绘制了一个比较复杂的图形,这就是<path>路径的优势。

当然SVG提供很多直接绘制图形的元素,比如<line>和<rect>等,但图形比较固定。

下面介绍一下<path>元素的主要属性的作用:

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

(2).fill-rule用来规定填充规则,具体可以参阅canvas非零绕组规则与奇偶规则一章节。

(3).stroke-width属性规定边框的宽度。

(4).d属性用来规定路径的具体绘制,有一点点的复杂,下面通过代码简单介绍一下。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style type="text/css">
svg {
  border:1px solid red;
}
</style>
</head>
<body>
<svg width="400" height="300">
  <path d="M50,50
           l150,50"
        stroke="red"
        fill="none"
        stroke-width="1"
         /> 
</svg>  
</body>
</html>

d属性规定了绘制路径的具体命令:

M命令表示Move to”(移动到)的意思,确定绘制路径的起始点,表示路径绘制起点设置在(50,50)。

L命令Line”(直线)的意思,那么结合上面的M命令,会绘制一条从(50,50)到(150,50)点的直线。

当然命令不止M和L两个,更多命令后面会有罗列。

命令有大小写之分,大写表示坐标是绝对位置,也就是以当前用户坐标系坐标原点(0,0)为参考;小写表示相对坐标,相对位置的点是指从虚拟画笔开始绘制的点的坐标加上由当前指令给出的坐标。

(1).M50,50是绝对坐标,那么就是相对于当前用户坐标系的(0,0)点位参考的。

(2).l150,50是相对坐标点,相对的是M50,50,那么这个点的绝对坐标位置就是(50+150,50+50)。

主要命令罗列如下:

命令参数描述
M(m)x y将画笔移动到点(x,y)
L(l)x y画笔从当前的点绘制线段到点(x,y)
H(h)x画笔从当前的点绘制水平线段到点(x,y0)
V(v)y画笔从当前的点绘制竖直线段到点(x0,y)
A(a)rx ry x-axis-rotation large-arc-flag sweep-flag x y画笔从当前的点绘制一段圆弧到点(x,y)
C(c)x1 y1, x2 y2, x y画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S(s)x2 y2, x y特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q(q)x1 y1, x y绘制二次贝塞尔曲线到点(x,y)
T(t)x y特殊版本的二次贝塞尔曲线(省略控制点)
无参数绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部