神刀安全网

鹏哥私房菜【SVG 是什么鬼?】

0.前言

今天下午,一个哥们问我,SVG 是什么东西,这个东西怎么用?

我之前对这个东西的认知就只停留在这个东西跟 Canvas 差不多,是一个 可缩放矢量图形

除此之外的东西还真就不是特别了解,所以下午专门花了大约2个小时研究了一下。

不查不知道,一查吓一跳,在网上居然没有关于 SVG 比较好的文章(其实是根本没有)。

所以本着我不入地狱谁入地狱的心态,来给大家作死研究下 SVG 是什么东西。

闲话少叙,正文开始。

1.SVG 小知识

这里引用一下 W3C 对 SVG 的解释。

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

之后来简单说明一下,SVG 的推荐用法。

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存:

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>  </svg>

代码解释:

第一行包含了 XML 声明。请注意 standalone 属性!

该属性规定此 SVG 文件是否是“独立的”,或含有对外部文件的引用。

standalone=”no” 意味着 SVG 文档会引用一个外部文件 – 在这里,是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。

该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。

该 DTD 位于 W3C,含有所有允许的 SVG 元素。

SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。

这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。

version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。

如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。

我们把圆的轮廓设置为 2px 宽,黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释:所有的开启标签必须有关闭标签!

2. SVG 小案例

在开始正文之前,我首先给大家放上一段完成的代码,让你们能够自行先摸索一下。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         body{             zoom:10;         }         svg{             background: #ccc;         }         p{             font-size: 5px;         }     </style> </head> <body>     <svg width="36" height="36" id="tanuki-logo">         <path           id="tanuki-right-ear"           class="tanuki-shape"           fill="red"           d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"/>         <path           id="tanuki-left-ear"           class="tanuki-shape"           fill="blue"           d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"/>         <path           id="tanuki-nose"           class="tanuki-shape"           fill="green"           d="M18,34.38 3,14 33,14 Z"/>         <path           id="tanuki-right-eye"           class="tanuki-shape"           fill="yellow"           d="M18,34.38 11.38,14 2,14 6,25Z"/>         <path           id="tanuki-left-eye"           class="tanuki-shape"           fill="cyan"           d="M18,34.38 24.62,14 34,14 30,25Z"/>         <path           id="tanuki-right-cheek"           class="tanuki-shape"           fill="purple"           d="M2 14L.1 20.16c-.18.565 0 1.2.5 1.56l17.42 12.66z"/>         <path           id="tanuki-left-cheek"           class="tanuki-shape"           fill="pink"           d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"/>     </svg>     <p>我是李鹏李先生</p> </body> </html>

上述代码的完成效果如下:

鹏哥私房菜【SVG 是什么鬼?】

可以看见,我用 SVG 绘制了一个小狐狸头的形状。

那这个东西是怎么弄的呢?

我们一条条的来分析。

3. 案例分析

首先是规定一个绘制区域。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         body{             zoom:10;         }         svg{             background: #ccc;         }         p{             font-size: 5px;         }     </style> </head> <body>     <svg width="36" height="36"></svg>     <p>我是李鹏李先生</p> </body> </html>

我这里设置了一个区域,并且给了一个灰色的背景颜色。

鹏哥私房菜【SVG 是什么鬼?】

之后,我在里面使用了<path>标签。

这里引用一下小甜瓜的话。

使用path标签时,就像用指令的方式来控制一只画笔。
比如:移动画笔到某一坐标位置,画一条线,画一条曲线,完事了抬起画笔。

那这里面我们看到用了好几个 <path> 标签,那我们先从第一个开始看。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         body{             zoom:10;         }         svg{             background: #ccc;         }         p{             font-size: 5px;         }     </style> </head> <body>     <svg width="36" height="36">         <path           id="tanuki-right-ear"           class="tanuki-shape"           fill="red"           d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"/>     </svg>     <p>我是李鹏李先生</p> </body> </html>

绘制结束如下:

鹏哥私房菜【SVG 是什么鬼?】

可以看见,我绘制了一个狐狸的右耳朵(正对屏幕)。

其他部分其实也都是大同小异,换换位置而已。

这里面可以看到,我使用了好几个属性,那么这些属性都是怎么回事呢?

接下来咱们先暂停一下,一起来看看,最基础的绘制原理到底是什么。

4. 基本原理介绍

我们的 SVG 实际也是通过具体的路径去绘制一个图形。

绘制时,坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。

所有指令大小写均可。

大写绝对定位,参照全局坐标系;

小写相对定位,参照父容器坐标系。

指令和数据间的空格可以省略(可以连在一起),

而且同一指令可以出现多次,也可以只用一次。

其中还有许多特定的英文单词,里面分别代表不同的含义。

在这里给大家做一个整理。

缩写字母 函数参数 函数含义
M moveto(M X,Y) 将画笔移动到指定的坐标位置
L lineto(L X,Y) 画直线到指定的坐标位置
H horizontal lineto(H X) 画水平线到指定的X坐标位置
V vertical lineto(V Y) 画垂直线到指定的Y坐标位置
C curveto(C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线
S smooth curveto(S X2,Y2,ENDX,ENDY)
Q quadratic Belzier curve(Q X,Y,ENDX,ENDY) 二次贝赛曲线
T smooth quadratic Belzier curveto(T ENDX,ENDY) 映射
A elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧线
Z closepath() 关闭路径

示范样例:

期望操作    M 起点X,起点Y    L(直线)终点X,终点Y    H(水平线)终点X    V(垂直线)终点Y
 代码实现    M 10,20   L 80,50   M 10,20   V 50   M 10,20   H 90

那我们现在就来在我们的区域中,绘制出我们最简单的一笔吧。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         body{             zoom:10;         }         svg{             background: yellow;         }     </style> </head> <body>     <svg width="36" height="36">         <path     fill="red",                   stroke-width="1",                   stroke="#000000"                   d=" M 0,0                       l 18,18                       z"           />     </svg> </body> </html>

内部使用属性如下:

属性名称 属性含义
fill 填充颜色
stroke-width 绘制边框的宽度
stroke 绘制边框的颜色

这样绘制出来的,就是一条直线啦。

鹏哥私房菜【SVG 是什么鬼?】

这时候有人可能要问了,你怎么知道要写18? 为什么写 18 就是到中间的位置了呢?

还记得我创建的时候,宽度是多少么?

实际上,你设置了多少宽,你的绘制区域就多大。

鹏哥私房菜【SVG 是什么鬼?】

这样解释的话,大家是不是就明白了,这个 SVG 到底是怎么回事了?

5.后记

关于 SVG 更多的说明,大家可以直接上网查询一下,我在这里就不做更多的说明了。

最后,补充一句。

SVG 和 Canvas 各有千秋,具体使用哪种还是需要自己去根据实际情况分析。

另外补充一句,SVG 算点实在太蛋疼了,强烈推荐大家去使用 SVG 编辑器来创建复杂的图形。

本文是作者原创,如果搬运,请注明出处。

请尊重作者劳动成果,谢谢配合。

李鹏
2016年09月29日

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 鹏哥私房菜【SVG 是什么鬼?】

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址