SVG图形绘制入门第一弹

之前很长一段时间,我是不重视SVG的,认为他就是在AI里画画,然后导出来做个矢量图标。直到我在上家公司遇到图表的绘制,因为不会写不得已而拿插件实现,而插件绘制的SVG代码又因为看着非常吃力甚至看不懂,导致自己严重受挫。到那个时候我才从基础正式开始学习SVG。 关于SVG的文章和教程网络上有很多,我这一系列的ABC其实是我自己的一个学历历程 ,对于高手应该没有太大的帮助,对于还没有怎么写过的同学,可以一起开始学习。

首先先来认识一下SVG:

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。

在易读性方面,基于XML也就是说SVG图像文件可以像HTML网页一样有着很好的可读性,可以用任何文本编辑器打开SVG图像,并可看到用来描述图像的代码(掌握了SVG语法的人甚至可以只用一个记事本便可以读出图像中的内容来)。

在交互方面,他也可以提供其他图像无法做到的交互,包括与css以及JS的样式表现,声音,动画等效果。

在SEO,无障碍方面,SVG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果,但却仍然是以文本的形式存在的, 这些信息可以为搜索引擎所用,而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人,可以通过其他方式(如声音)来传送这些信息。

在视觉方面,SVG图像中的文字独立于图像,不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。

在优化方面,SVG文件比那些GIF和JPEG,PNG格式的文件要小很多,因而下载也更快。

然后我们看一下浏览器支持的情况:

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本, 可通过安装Adobe SVG Viewer以支持SVG。

至于使用的取舍,要看各位的项目需求了。

简单的介绍完SVG,我们开始正式学习SVG。

关于横向的SVG使用,这里就不多描述了,因为大家应该都在实际项目里以各种方式使用过,比如作为背景图,用src方式引用,或者以内联的方式等。

我们只纵向的了解SVG自身的写法。

先看一个最简单的例子

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 </svg>

这是一段非常非常简单的svg代码,你会在很多SVG的教程文章里看到。其中的xmlns属性是命名空间,这个在我们学习xhtml以及XML的时候都已经很详细的了解过,html5之后命名空间被省略,我们下面也不再研究关于命名空间的东西以及可能造成的影响,如果有对命名空间不了解的同学建议单独去看一下,这是个很有意思的东西,顺便安利下以前用命名空间实现的一篇自定义标签的文章:使用有趣的自定义标记来布局页面

OK,现在我们的代码更简单了

<svg width="500" height="500">
 </svg>

这里的宽高500,定义了一块SVG的画布,他有个名字叫做 viewport,和我们设备的viewport要区分开,他只是svg的视区。

然后我们看到500后面没有单位,SVG默认的单位是px,你也可以使用css里的其他单位,单位的知识在css学习中,已经全面了解,这里也不多做描述。

定义完画布,然后就可以在画布里绘图了。SVG 有一些预定义的形状元素,我们可以直接拿来用。

矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>

首先从矩形开始绘制,平面上定义一个矩形,只需要坐标和长宽,SVG当然不例外

<rect x="20" y="20" width="100" height="100" style="fill:rgb(200,200,200); stroke:rgb(0,0,0)"></rect>

(这里简单提一下style里的 fill 和 stroke,填充和描边的样式属性,对于一个前端来说样式一看就懂,不必再多介绍,你可以像我这样用内联样式,也可以写个class调用。)

demo

圆形,需要圆心的坐标和半径

<circle cx="100" cy="100" r="50" style="fill:rgb(200,200,200); stroke:rgb(0,0,0)"></circle>

demo

椭圆,需要圆心坐标,水平半径以及垂直半径

<ellipse cx="100" cy="100" rx="100" ry="80" style="fill:rgb(200,200,200); stroke:rgb(0,0,0)"></ellipse>

demo

线条,需要两个点的坐标

<line x1="40" y1="40" x2="140" y2="100" style="stroke:rgb(99,99,99);"></line>

demo

多边形,points 属性定义多边形每个角的 x 和 y 坐标,理论上不应该少于三个坐标点,他会在绘制完最后一个点的时候,自动闭合路径,回到第一个点。但实际上你给他两个点的话,他也会返回一条直线给你

<polygon points="40 40, 60 90, 180 250, 10 101" style="fill:#cccccc; stroke:#000000;"></polygon>

demo

折线,他看起来和多边形的实现是一样的,而且虽然是折线,一样可以写填充,也就是说……它也可以给你绘制一个多边形,除了不会自动闭合(*^__^*)

<polyline points="40 40, 60 90, 180 250, 10 101" style="fill:rgb(200,200,200); stroke:rgb(0,0,0)"></polyline>

demo

一直到这里,我们介绍了六个常用的SVG形状,他们有的可以互换实现方法,包括下面我们要学习的path,从我查到的资料来看,用哪个形状来进行绘图,他们之间不存在性能上的优劣,看个人习惯吧。

学习完上边几个简单的形状,下面是SVG绘制图形的重头戏,path。

path是SVG基本形状里最强大的一个,因为,上面所有的形状他都可以绘制。上面形状实现不了的功能,他也可以完成。

path元素的形状是通过属性d定义的,属性d的值是一个“命令+参数”的序列,我们先来了解这个d里边的命令,每一个命令都用一个关键字母来表示,比如:

M = moveto 可以理解为 把画笔移动到这个坐标开始绘制,表示路径开始的位置(X,Y)

<path d="M10 10" />

你看不到任何东西,因为只是移动画笔到10 10,并没有进行绘制。

L = lineto 从当前位置画一条直线到这个坐标(X,Y)

<path d="M40 40 L 220 40"/>

demo

V = vertical lineto 从当前位置画一条垂直线到坐标(X,Y)

<path d="M40 40 L 220 40 V 220"/>

demo

H = horizontal lineto 从当前位置画一条水平线到坐标(X,Y)

<path d="M40 40 L 220 40 V 220 H 40" />

demo

Z = closepath 闭合路径

<path d="M40 40 L 220 40 V 220 H 40 Z" />

demo

A = elliptical Arc 圆弧,他是椭圆形或者说圆形的一部分

A 45 45, 0, 0, 0, 125 125

弧形命令A的前两个参数分别是x轴半径和y轴半径,第三个参数表示弧形的旋转角度,第四个参数表示弧形角度的大小,决定弧线是大于还是小于180度,0表示小于,1表示大于。第五个参数表示弧线的方向,0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧。最后两个数字是一个坐标,表示弧形的结束点。

demo

demo里清楚的展示了可能的四种情况,上边两个图形分别是小角度逆时针,大角度逆时针,下边两个是小角度顺时针,大角度顺时针。

为了更直观的观察角度和方向,我闭合了弧形,让他成为一个饼图。

(*^__^*) 到这里是不是就可以手绘饼图了。

Q = quadratic Belzier curve T = smooth quadratic Belzier curveto

二次贝塞尔曲线Q和延长二次贝塞尔曲线的参数T。

二次贝塞尔曲线的参数是两个坐标点:x1 y1, x y

第一个点是曲线的控制点,第二个点是曲线的结束点,控制点用来决定起点和终点的曲线斜率。

<path d="M10 80 Q 95 10 180 80" style="stroke:#000; fill:none"/>

T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线

<path d="M10 180 Q 95 110 180 180 T 290 180" style="stroke:#000; fill:none"/>

demo

C = curveto S = smooth curveto

C命令是三次贝塞尔曲线,S是他的延长参数。C比Q多出一个控制点参数:C x1 y1, x2 y2, x y

S命令可以用来创建与之前那些曲线一样的贝塞尔曲线,就像上面的T。如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点。

demo

其实想直观的理解控制点,可以去试试PS里的钢笔工具。

未完待续……..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

如何使用 CSS Grid 布局 IOS11 新的控制中心

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 昨天 IOS11 就可以开始安装更新了,下图就是它带来的新的控制中心界面,是...

1956
来自专栏DannyHoo的专栏

新浪微博项目笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1481
来自专栏木头编程 - moTzxx

HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

2054
来自专栏十月梦想

html常用标签标记

本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《html常用标签标记》

1253
来自专栏HenCoder

HenCoder Android 开发进阶:自定义 View 1-4 Canvas 对绘制的辅助

这期是 HenCoder 自定义绘制的第 1-4 期:Canvas 对绘制的辅助——范围裁切和几何变换。

1272
来自专栏数据小魔方

带负值的图表标签处理方法

今天跟大家分享带负值的图表标签处理方法! ▽▼▽ 在遇到某些特殊图表时,特别是一个数据系列中既有正值又有负值的情况,数据标签以及纵轴轴标签总是会相互遮挡,做出来...

3286
来自专栏一“技”之长

Java开发GUI之Label标签 原

    Label控件是awt包中最简单的几个视图控件之一,其用来显示固定的文本,示例如下:

752
来自专栏PPV课数据科学社区

[V课堂]R语言十八讲(七)

? R的画图功能是非常强大的,这非常有利于数据可视化,对于R画图,我们一 般使用三个画图系统,分别是R自带的画图系统,另外还有两个包,他们的画图功能也很强...

2816
来自专栏Python小屋

Python实现批量图片添加数字水印

之前写过一个类似的代码,是把水印信息打散以后随机添加到原图中,并提供了水印信息的提取功能,请参考:Python实现图像空域随机水印加入与提取。本文代码功能:为指...

3883
来自专栏懒人开发

(1.4)James Stewart Calculus 5th Edition: Graphing Calculators and Computers

在电脑的展现窗口或者屏幕中,矩形部分,我们叫 矩形视图。(不知道这样翻译好不好,反正理解成一个矩形区域就行)

874

扫码关注云+社区