SVG 基础教程

Posted Amo Xiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG 基础教程相关的知识，希望对你有一定的参考价值。

目录


最近笔者在抓取数据的时候，遇到了 SVG 反爬，故找了一份 SVG 学习笔记，本文用于记录 SVG 学习过程中的知识点。

一、SVG 基础

SVG 指可伸缩矢量图形，是定义用于网络的基于矢量的图形，并且 SVG 图像不会因为放大或改变尺寸而有所失真。与其他图形相比，SVG 图像有这诸多优势，下面将具体介绍。

为什么使用 SVG?(其实我还想别使用呢，阻碍我抓取数据 哈哈)。SVG 是一种和图像分辨率无关的矢量图形格式，SVG 能得到广大编程者的青睐。自然是有着 过人之处，其主要优点如下：

  1. 高质量。由于 SVG 图像不依赖于分辨率的，所以当放大或改变图像尺寸时，图像的清晰度不会被破坏。
  2. 交互性和动态性。与其他图像格式相比，动态性和交互性是 SVG 较典型的一个特性。SVG 是基于 XML 的，它提供强大的交互性，程序员可以在 SVG 中嵌入动画元素，或通过脚本定义来达到高亮、声效、动画等特效。
  3. 颜色控制。SVG 提供一个1600万种颜色的调色板，支持 ICC颜色描述 文件描述文件标准、RGB、线性填充、渐变和蒙版。
  4. 文本独立性。SVG 图像中的文字独立于图像，换句话说，就是 SVG 中的图像是可选的，所以 SVG 图像中的文字是可以被搜索的。
  5. 源文件更小。与 JPEG 和 GIF 格式的图像相比，SVG 格式源文件的尺寸更小，且可压缩性更强。
  6. 基于 XML。SVG是基于 XML 的，这意味着 SVG 通过 XML 表达信息和传递数据时，不仅可以跨平台，还可以跨控件甚至跨越设备。

使用 SVG 的几种方式。在 HTML 中使用 SVG 文件时，可以通过 <embed> 元素、<object> 元素或者 <iframe> 元素，当然，SVG 代码也可以直接嵌入到 HTML 页面中。下面具体介绍这四种 SVG 的使用方法。

(1) 使用 <embed>。使用 <embed> 标签的优点是，<embed> 标签受到所有主流浏览器支持，并且允许使用脚本；但是其缺点是在 Xhtml 和 HTML4 中不推荐使用 <embed> 标签。其语法如下：

<embed src="demo.svg" type="image/svg+xml">

(2) 使用 <object>。<object> 标签是 HTML4 中的标签，所以在 XHTML、HTML4 以及 HTML5 中都可以使用该标签，并且同样被所有主流浏览器支持，但是使用该标签的缺点就是不允许使用脚本。其语法如下：

<object data="rect" type="image/svg+xml"></object>

(3) 使用 <iframe>。<iframe> 标签被大部分浏览器支持，并且允许使用脚本，其缺点就是在 XHTML 和 HTML4 中不推荐使用该标签(现在主流都H5啦，所以不用考虑太多)。其语法如下：

<iframe src="rect" ></iframe>

(4) 通过 <a> 标签链接到 SVG 文件。除以上各标签外，我们还可以使用链接标签 <a> 标签来引入一个 SVG 文件。具体语法如下：

<a href="demo.svg">打开svg文件</a>

(5) 在 HTML 中直接添加 SVG 代码。在 Firefox、IE9、谷歌Chrome 以及 Safari 中，可以直接在 HTML 嵌入 SVG 代码。笔者学习的时候主要是通过直接嵌入 SVG 代码的方式学习 SVG 相关知识的。其具体方法如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

二、绘制图形

2.1 绘制矩形

绘制矩形可以使用 <rect> 元素，其语法如下：

<rect rx="5" ry="5" x="50" y="20" width="150" height="70" fill="#FF5722" stroke="#00ffff "stroke-width=" 5"></rect>

该语法中，各属性的含义如下表所示：

属性表示的含义
width必须属性。定义矩形的宽度
height必须属性。定义矩形的高度
x可选属性。定义矩形x方向的起始位置
y可选属性。定义矩形y方向的起始位置
rx可选属性。x轴的圆角半径
ry可选属性。y轴的圆角半径
fill可选属性。矩形的填充样式，若不进行设置，则默认为黑色
stroke可选属性。矩形的边框样式，若不进行设置，则默认为无边框
stroke-width可选属性。矩形的边框宽度

说明：上述语法中，fill 属性、stroke 属性以及 stroke-width 属性并不是 <rect> 属性所特有的，即其他标签也可以使用该属性，当然，也可以使用 style 来设置其填充样式和边框样式等，若使用 style 则上述语法应该与以下语法相同：

<rect rx="5" ry="5" x="50" y="20" width="150" height="70" style="fill:#ff5722;stroke:#00ffff;stroke-width: 5">
</rect>

【示例1】在页面中嵌入 SVG 标签，然后在 SVG 标签中，通过<rect>元素添加矩形，并且设置矩形的颜色为橙色(#ff5277)，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制矩形</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="50" y="20" width="150" height="70" fill="#ff5722"></rect>
</svg>
</body>
</html>

其运行效果如下图所示：

2.2 绘制圆形

SVG 中绘制圆形可以使用 <circle> 元素，其语法如下：

<circle cx="20" cy="30" r="10"/>

参数解释：

  1. cx 属性：定义圆点的x坐标。
  2. cy 属性：定义圆点的y坐标。
  3. r 属性：定义圆的半径。

【示例2】在网页中使用 SVG 绘制一个圆形。在 HTML 中添加 SVG 标签，然后在 SVG 标签中添加 circle 标签，然后在 circle 标签中设置圆形的圆点、半径以及设置圆形的颜色和边框颜色等，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制圆形</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="140" cy="80" r="50" fill="#9acdb4" stroke="#db7093" stroke-width="5"/>
</svg>
</body>
</html>

具体运行效果如下图所示：

2.3 绘制椭圆

绘制椭圆需要使用 <ellipse> 标签，其原理与圆相似，其不同之处在于椭圆有不同的 x 半径和 y 半径，而圆形的 x 半径和 y 半径是相同的，其具体语法如下：

<ellipse cx="140" cy="80" rx="50" ry="30"/>

参数解释：

  1. cx 属性：定义椭圆中心的x坐标。
  2. cy 属性：定义椭圆中心的y坐标。
  3. rx 属性：定义椭圆的水平半径。
  4. ry 属性：定义椭圆的垂直半径。

【示例3】在网页中使用 SVG 绘制一个椭圆。在网页中绘制一个椭圆，并且设置椭圆的填充颜色和边框颜色，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制椭圆</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="140" cy="80" rx="50" ry="30" fill="#a5d9ff" stroke="#ff4d7d" stroke-width="5"/>
</svg>
</body>
</html>

其运行效果如下图所示：

2.4 绘制多边形

SVG 中绘制多边形可以使用 <polygon> 元素，具体语法如下：

<polygon points="90,10 130,10 150,45"/>

该语法中，points 属性是必须属性，该属性用于按顺时针或逆时针顺序依次定义多边形的定点，各顶点使用逗号或空格间隔开都可以。

【示例4】在网页中使用 SVG 绘制一个多边形。本实例中五条首尾相连的直线使其形成一个五角星，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制多边形</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="90,10 130,10 150,45 130,80 90,80 70,45"
             fill="#fdb5ff" stroke="#6cde1b" stroke-width="6"/>
</svg>
</body>
</html>

其运行效果如下图所示：

2.5 绘制直线

SVG 中绘制直线可以使用 <line> 元素，具体语法如下：

<line x1="0" y1="0" x2="50" y2="50" />

参数解释：

  1. x1 属性：定义线条起点x坐标。
  2. y1 属性：定义线条起点的y坐标。
  3. x2 属性：定义线条终点的x坐标。
  4. y2 属性：定义线条终点的y坐标。

【示例5】在网页中使用 SVG 绘制一个五角星。本实例中通过绘制五条首尾相连的直线使其形成一个五角星，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制五角星</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
    <line x1="50" y1="60" x2="250" y2="60" stroke="#00ff4c" stroke-width="5"/>
    <line x1="250" y1="60" x2="100" y2="180" stroke="#00ff4c" stroke-width="5"/>
    <line x1="100" y1="180" x2="150" y2="0" stroke="#00ff4c" stroke-width="5"/>
    <line x1="150" y1="0" x2="220" y2="180" stroke="#00ff4c" stroke-width="5"/>
    <line x1="220" y1="180" x2="50" y2="60" stroke="#00ff4c" stroke-width="5"/>
</svg>
</body>
</html>

其运行效果如下图所示：

2.6 绘制曲线

SVG 中绘制曲线使用 <polyline> 元素绘制曲线，但是该元素只能绘制只有直线的曲线，其语法如下：

<polyline points="30,30 55 70  ,80 30, 105 70,130 30 "style="fill:none;stroke:#00ff4c;stroke-width: 5"/>

同绘制多边形一样，绘制曲线时，需要按顺时针或者逆时针的顺序依次定义各个定点，各定点坐标以空格或逗号间隔都可以。

【示例6】在网页中使用 SVG 绘制一个矩形旋涡，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制曲线</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
    <polyline points="30,30 240 ,30 240,240 60,240 60,60 210,60 210,210 90,210 90,90 180,90,
180,180 120,180  120,120, 150,120 150,150"  style="fill:none;stroke:#ff67fa;stroke-width: 5"/>
</svg>
</body>
</html>

其具体运行效果如下图所示：

2.7 绘制路径

SVG 中绘制路径使用的是 <path> 标签，而通过 path 标签中的 d属性 定义路径。其语法如下：

<path d="M30,30 L240 ,30 "/>

在使用该语法定义路径时，可以使用下表所示的命令指定路径的相关数据：

命令表示的含义
Mmoveto,路径的起点
Llineto从路径的上一个定点与该定点连接
Hhorizontal lineto绘制水平线
Vvertical lineto绘制垂直线
Ccurveto曲线连接
Ssmooth curveto平滑的曲线连接
Qquadratic Bézier curve二次贝塞尔曲线
Tsmooth quadratic Bézier curveto平滑的二次贝塞尔曲线
Aelloptical Arc椭圆的弧线
Zclosepath将路径的起点与终点连接

注意：上表中所有命令大小写字母均可，若为大写字母表示表示绝对定位，反之若为小写字母则表示相对定位。

如下所示的代码可以绘制一条贝塞尔曲线，曲线的起点为A点坐标为(70,50)，终点为B点(180,50)，而其控制点为(120,130)，换句话说，Q命令设置的是贝塞尔二次曲线的控制点和终点，而曲线的起点是Q命令的前一个顶点。

<path d="M70,50 Q120,130,180,50" fill="none" stroke-width="3" stroke="blue"></path>

具体如下图所示：

【示例7】在网页中使用SVG绘制微信会话框，本实例绘制会话框时，从起点开始按逆时针方向开始绘制，为方便理解，本实例会话框的圆角处的曲线为贝塞尔二次曲线。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg绘制路径</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300">
    <!--M200,30 为起点-->
    <!--Q200 10,190 10绘制第一段贝塞尔曲线-->
    <!--Q60,10 65,30绘制第二段贝塞尔曲线-->
    <!--Q65,65 85,62 绘制第三段贝塞尔曲线-->
    <!--Q200,62 200,45 绘制第四段贝塞尔曲线-->
    <path d="M200,30L200,20Q200 10,190 10 L80 10 Q60,10 65,30 L65,45Q65,65,85,62
L185,62Q200,62 200,45L 210,38Z" fill以上是关于SVG 基础教程的主要内容，如果未能解决你的问题，请参考以下文章
 

 用php下载一个svg


 text 使用SVG的片段


 css 快速片段将svg与中心对齐并缩放到视口大小。


 通过 webapp 提供时，SVG 片段标识符在 Safari 中被交换


 jstl标签库基础教程及其使用代码


 Safari中的SVG Fragment Sprite + CSS背景图像