SVG探索(二):绘制基础图形
前言
首先,SVG 是什么?
SVG 是指可缩放矢量图形(Scalable Vector Graphics,SVG)
,基于 XML 标记语言,可以用于描述二维的矢量图形。显而易见,SVG 格式提供的是矢量图,因此图片可以被无限放大而不失真或降低质量,并且可以方便地修改内容和进行定制化开发。
在前端开发工作中,我们经常用到 iconfont 等生成的字体图标,此外,还可以使用自定义的 SVG 图标实现进度条效果、图标按钮效果等。本文介绍了几种常见的基础图形的实现方法。
本文绘制的基础图形一览如下:
圆和圆弧 circle
在之前的文章中,我们实现了画圆和画圆弧的效果。
具体是,在svg标签中定义circle标签,并设置其属性:r 表示圆的半径、cx和cy分别表示圆心的坐标、fill为圆的颜色(可以设置transparent表示不填充颜色),这样就实现了一个圆。
<svg
width="100"
height="100"
viewBox="0 0 100 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<circle
r="50"
cx="50"
cy="50"
fill="palegreen"
/>
</svg>
那么,画圆弧呢?
首先,我们设置 circle 标签的fill="transparent"
,也就是透明效果;接着,设置stroke: green; stroke-width: 8px; transform-origin: center;
设置圆的描边效果;此外,还需要设置stroke-dasharray
为圆的周长,stroke-dashoffset
为实际长度,也就实现了圆弧效果。
需要注意的是,stroke-dashoffset
的数值越小,圆弧越接近一个圆。
椭圆 ellipse
- cx属性定义的椭圆中心的x坐标
- cy属性定义的椭圆中心的y坐标
- rx属性定义的水平半径
- ry属性定义的垂直半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="150" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
直线 line
x1, y1 定义直线的起点,x2, y2 定义直线的终点:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0); stroke-width:2"/>
</svg>
文本 text
参考这里,举个例子:
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small {
font: italic 13px sans-serif;
}
.heavy {
font: bold 30px sans-serif;
}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
</svg>
矩形 rect
width, height 设置宽高,x, y 设置矩形的坐标,rx, ry 相当于 border-radius 属性。
<svg width="200" height="200" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
多段线 polyline
在 points 中定义各个点,每个点的坐标用空格隔开,不同点的坐标用逗号分隔。
<p>画一个五角星</p>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>
多边形 polygon
和 polyline 类似的用法。二者的区别是 polygon 是封闭的图形,而 polyline 是点的连线路径,是不封闭的。如果 polyline 要形成封闭的图形,需要起点坐标和终点坐标一样。
<svg width="150" height="150">
<polygon points="50,50 100,50 100,100 50,100" fill="none" stroke="red" stroke-width="1" />
</svg>
<svg width="150" height="150">
<polyline points="50,50 100,50 100,100 50,100" fill="none" stroke="red" stroke-width="1" />
</svg>
<svg width="150" height="150">
<polyline points="50,50 100,50 100,100 50,100 50,50" fill="none" stroke="red" stroke-width="1" />
</svg>
路径 path
d 属性定义了要绘制的路径,有如下属性:
- MoveTo: M, m
- LineTo: L, l, H, h, V, v
- Cubic Bézier Curve(三次): C, c, S, s
- Quadratic Bézier Curve(二次): Q, q, T, t
- Elliptical Arc Curve(椭圆曲线弧): A, a
- ClosePath: Z, z
其中,大写表示绝对定位,小写表示相对定位。
举个例子,下面两种路径绘制的图形是一样的:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- LineTo commands with absolute coordinates -->
<path fill="none" stroke="red"
d="M 10,10
L 90,90
V 10
H 50" />
<!-- LineTo commands with relative coordinates -->
<path fill="none" stroke="red"
d="M 110,10
l 80,80
v -80
h -40" />
</svg>
后记
在本文中,作者介绍了几种常见的基础图形的实现方法。SVG 是一种强大的语言,在前端开发中有着广泛的应用,可以帮助我们实现矢量图形的绘制和定制化开发等。