zzxworld

SVG 简明入门使用指南

SVG 是一种可以绘制矢量图片的图形技术,它基于 XML 标记语言。目前主流浏览器都支持直接显示这种格式的图形资源,出于项目需要,我目前正在学习这门图形技术的使用,本文是即是一篇学习总结记录,同时也是一篇面向 SVG 初学者的快速入门教程。

SVG 是什么

上面有过简单的介绍,SVG 是一种使用 XML 标记语言的图形技术。通过预定义的一些 XML 标签,可以绘制各种形状的矢量图形。矢量图形意味着图片不论是放大还是缩小,在体积不变的情况下,图片质量不会有任何损失。

除了可以绘制各种形状,SVG 还支持渐变,旋转,滤镜以及动画效果。加上它使用的是 XML 标签,所以还可以通过 CSS 来定义样式,以及用 JavaScript 来实现一些交互功能。

SVG 的用途

利用 SVG 缩放而不损失图片显示质量的特性,可以用来制作应用程序的图标。

而针对 XML 标签语言特性,以及与 CSS 和 JavaScript 的互动能力,可以用来制作一些数据分析以及统计图表类的展示功能。

画直线

<svg>
    <line x1="10" y1="10" x2="110" y2="10" stroke="blue" stroke-width="5"/>
</svg>

<svg> 是 SVG 图形的根元素,这里可以把它当作是画布。<line> 是绘制直线的标签,x1y1 是直线起点,x2y2 代表直线的重点。它们的坐标相对于 <svg> 标签的左上角。stroke 设置线条颜色,stroke-width 设置线条宽度。

画矩形

<svg>
    <rect x="10" y="10" width="110" height="50" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>

<svg> 是必不可少的根节点。<rect> 是矩形绘制标签。通过 xy 定义了矩形绘制的起点,然后通过 widthheight 设置了矩形的大小。fill 用来设置矩形的填充颜色,这里用的 transparent,表示设置为透明。stroke 和上面直线的作用一致,这里不再赘述。

画圆形

<svg>
    <circle cx="60" cy="60" r="50" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>

<circle> 是圆形绘制标签。cxcy 定义了圆的中心点位置,r 用来设置圆的半径。

画椭圆

<svg>
    <ellipse cx="60" cy="60" rx="50" ry="25" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>

ellipse 是椭圆绘制标签,cxcy 与圆形绘制标签的作用一致,用来定义中心点。rx 用来定义横向的半径,ry 用来定义纵向的半径。

画折线

<svg>
    <polyline points="10 40, 60 10, 60 60, 10 90" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>

<polyline> 是折线绘制标签,它主要通过 points 来定义要绘制的任意点。这个属性使用空格来分割 x 和 y 的取值,通过逗号区分定义的位置点。点的定义顺序为顺时针方向,从九点钟位置开始。

画多边形

<svg>
    <polygon points="10 40, 60 10, 60 60, 10 90" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>

<polygon> 是多边形绘制标签,它和折线绘制标签的用法相似,同样是以 points 来定义要绘制的任意点。区别在于多边形绘制标签会自动闭合结束点和起始点。通过观察上面两个绘制标签的示例代码和演示效果可以很明显观察到这个差异。

未完待续

路径、渐变、遮罩等内容正在整理中,稍候更新。