当前位置： 文江博客文章教程详情

SVG 快速入门教程

发布于 2024-11-18 22:30:57 字数 12551 浏览 2 评论 0

第一章：SVG 入门篇

SVG 简介

SVG 即 Scalable Vector Graphics 可缩放矢量图形，使用 XML 格式定义图形。
优点：

  • SVG 与其他图片格式相比：主要优势在于可缩放的同时不会影响图片的质量。
  • 与 flash 相比 ：SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

SVG in HTML 常用方法

使用 <img> ​元素来嵌入 SVG 图像

<img src="http://www.w3school.com.cn/svg/rect1.svg"  width="300" />

将 SVG 图像作为背景图像嵌入

background: url('http://www.w3school.com.cn/svg/rect1.svg') no-repeat;

使用 svg 元素，通过代码将 SVG 图像嵌入到 HTML 代码中

<body>
	<svg width="100%" height="100%">

		<rect x="20" y="20" width="250" height="250"
style="fill:#fecdddd;"/>

	</svg>
</body>

svg sprites

svg sprites 类似于 css sprites，将各个 svg 合并在一起。
最主要的优点就是能减少页面的加载时间，优化开发流程，以及保持页面中图片元素的一致性。
实践中我们可以把整块的 svg 放在 head 头部， 因此可以在一处地方更新 svg 即可，而不是让 svg 的代码块散落在文档的各个地方。

<head>
	<meta charset="utf-8" />
	<title>svg</title>
	
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="158" viewBox="0 0 32 158">
		<!-- SVG 等省略  -->
	</svg>
	
</head>

在这里 https://icomoon.io/app/#/select 可以设置 sprites，可以自己导入 svg。

svg sprite

symbol+use

在 head 头部的 svg 中使用 symbol 元素，并使用 id 属性。其中 symbol 类似 flash 中的元件，可多次使用。

 <svg id="icon-truck" width="32" height="32" viewBox="0 0 32 32" x="0" y="126">
    <symbol id="truck">
    <path fill="#fff" d="M24.832 11.445c-0.186-0.278-0.498-0.445-0.832-0.445h-1c-0.553 0-1 0.447-1 1v6c0 0.553 0.447 1 1 1h4c0.553 0 1-0.447 1-1v-1.5c0-0.197-0.059-0.391-0.168-0.555l-3-4.5zM27 18h-4v-6h1l3 4.5v1.5zM31.496 15.336l-4-6c-0.558-0.837-1.492-1.336-2.496-1.336h-4v-2c0-1.654-1.346-3-3-3h-15c-1.654 0-3 1.346-3 3v11c0 1.654 1.346 3 3 3v0 3c0 1.654 1.346 3 3 3h1.142c0.447 1.721 2 3 3.859 3 1.857 0 3.41-1.279 3.857-3h5.282c0.447 1.721 2 3 3.859 3 1.857 0 3.41-1.279 3.857-3h1.144c1.654 0 3-1.346 3-3v-6c0-0.594-0.174-1.17-0.504-1.664zM3 18c-0.552 0-1-0.447-1-1v-11c0-0.553 0.448-1 1-1h15c0.553 0 1 0.447 1 1v11c0 0.553-0.447 1-1 1h-15zM11.001 27c-1.105 0-2-0.896-2-2s0.895-2 2-2c1.104 0 2 0.896 2 2s-0.897 2-2 2zM24 27c-1.105 0-2-0.896-2-2s0.895-2 2-2c1.104 0 2 0.896 2 2s-0.896 2-2 2zM30 23c0 0.553-0.447 1-1 1h-1.143c-0.447-1.721-2-3-3.857-3-1.859 0-3.412 1.279-3.859 3h-5.282c-0.447-1.721-2-3-3.857-3-1.859 0-3.412 1.279-3.859 3h-1.143c-0.552 0-1-0.447-1-1v-3h13c1.654 0 3-1.346 3-3v-7h4c0.334 0 0.646 0.167 0.832 0.445l4 6c0.109 0.164 0.168 0.358 0.168 0.555v6z"></path>
    </symbol>
    </svg>

然后在需要用到这个元件的地方使用 use 元素引用元件。其中 xlink:href="#truck"相当于元件的链接，通过引用元件的 id 来实现。

<use xlink:href="#truck" x="0" y="0" />

兼容性

svg 兼容性

兼容性详细情况请点击 此处

总结思考

一般在 html 中使用 SVG 有三种方法：使用<img>元素来嵌入 SVG 图像；将 SVG 图像作为背景图像嵌入；使用<svg>元素，通过代码将 SVG 图像嵌入到 HTML 代码中。
使用过程中，可通过 svg sprites 提高性能，通过 symbol 以及 use 元素提高文档的可维护性等。

第二章：SVG 形状

矩形 <rect>

<rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>

解释：x 为 x 坐标，y 为 y 坐标；width 和 height 分别为形状的高度和宽度；rx 和 ry 属性可使矩形产生圆角。
另外，下面三个属性是文章后面会用到的，之后不会过多讲述：

  • fill 属性定义形状的填充颜色
  • stroke 属性定义图形边框的颜色
  • stroke-width 属性定义形状边框的宽度

圆形 <circle>

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

解释：cx 和 cy 分别为圆点的 x 和 y 坐标；r 为半径。

椭圆 <ellipse>

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

解释：cx 圆点的 x 坐标，cy 圆点的 y 坐标；rx 水平半径，ry 垂直半径。

线 <line>

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

解释：(x1,y1) 为线条的开始坐标；(x2,y2) 为线条的结束坐标。

折线 <polyline>

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

解释：points 属性定义多边形每个角的 x 和 y 坐标。为了可读性，建议 x 与 y 坐标用逗号分开，每个角之间的坐标用空格分开。

多边形 <polygon>

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

解释：points 属性定义多边形每个角的 x 和 y 坐标。

路径 <path>

直线指令：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
Z = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg>
  <path d="M250 150 L150 350 L350 350 Z" />
</svg>

解释：该路径开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。
由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。

svg 的贝塞尔曲线

贝塞尔曲线指令：
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
贝塞尔曲线控制小工具 http://dayu.pw/svgcontrol/ ，操控多次可加深对贝塞尔曲线的理解。

三次贝塞尔曲线控制

三次贝塞尔曲线控制

CSQT 比较难记，联想记忆法“厕所切图(CSQT)”就比较容易记住了。
厕所是 3D 空间，所以 CS 是三次曲线噢，切图是平面图，所以是二次曲线，很好记。

C 三次贝塞尔曲线
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

最后一个坐标(x,y) 表示的是曲线的终点，另外两个坐标是控制点，(x1,y1) 是起点的控制点，(x2,y2) 是终点的控制点。小写指令 c 表示相对坐标。

S 光滑三次贝塞尔曲线
S x2 y2, x y (or s dx2 dy2, dx dy)

之所以 S 命令没有 x1 y1，是因为 S 命令跟在 C 命令后，x1 y1 默认是 C 命令的第二个控制点的对称点，如下图蓝色线条所示。
光滑三次贝塞尔曲线控制

如果前面没有 C 命令，即 S 命令单独使用时，S 命令画出来的是二次贝塞尔曲线，因为 x1 y1 和 x2 y2 默认是同一个控制点了。

Q 二次贝塞尔曲线
Q x1 y1, x y (or q dx1 dy1, dx dy)
T 光滑二次贝塞尔曲线
T x y (or t dx dy)

T 命令的控制点默认是前面 C 命令的控制点的对称点。
光滑二次贝塞尔曲线控制

如果 T 命令前面没有 C 命令，即 T 命令单独使用时，T 命令画出来的是直线。

总结思考

路径比基本形状更强大、更灵活。使用路径绘制复杂图形比较麻烦，但是使用它们来绘制图形的效果大多数时候很赞，一般其他基本图形是做不来的。

第三章：SVG 动画

svg 路径动画

DEMO:
路径动画

g 元素是用于把相关元素进行组合的容器元素。animateMotion 使元素沿着动作路径移动，且该路径不可见，path 定义的是可见的路径。rotate="auto"使元素移动得更加自然，会随着路径旋转一定的角度。

<svg width="1500" height="150" class="truck">
      <g>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#truck" x="0" y="0"></use>
        <animateMotion path="M0 0 C135.5 68 463.5 -8 700 29 S1000 -20 1940,70" begin="-3s" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
      </g>
      <g>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#truck" x="0" y="0"></use>
        <animateMotion path="M0 0 C135.5 68 463.5 -8 700 29 S1000 -20 1940,70" begin="0s" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
      </g>

      <path d="M0 30 C135.5 98 463.5 22 700 59 S1000 10 1940,100" stroke="#000" stroke-width="2" fill="none" x="-1000" y="-1000" class="truck_path"></path>
</svg>

点击查看全部代码

svg 路径描边动画

DEMO:
路径动画

在 path 等元素上必须使用 stoke 属性，否则动画不执行。stroke 表示描边颜色；stroke-width 表示描边的粗细；

<svg>
	<symbol id="phone" viewBox="0 0 1024 1024">
		<path fill="none" stroke="#000" stroke-width="3" d="M768 0h-512c-53.056 0-96 42.976-96 96v832c0 53.056 42.976 96 96 96h512c52.992 0 96-43.008 96-96v-832c0-53.056-43.008-96-96-96zM800 928c0 17.632-14.368 32-32 32h-512c-17.664 0-32-14.304-32-32v-64.128h576v64.128zM800 831.872h-576v-639.872h576v639.872zM800 160h-576v-64c0-17.664 14.336-32 32-32h512c17.632 0 32 14.336 32 32v64zM576 112c0 8.832-7.2 16-16 16h-96c-8.864 0-16-7.168-16-16v0c0-8.864 7.136-16 16-16h96c8.8 0 16 7.136 16 16v0zM544 911.872c0 8.8-7.2 16-16 16h-32c-8.832 0-16-7.2-16-16v0c0-8.864 7.168-16 16-16h32c8.8 0 16 7.136 16 16v0z"></path>
    </symbol>
</svg>

使用 CSS3 animation 实现，因为内联的 svg 本身就是 Html 元素，可以通过 CSS3 来控制颜色等属性。
stroke-dasharray 表示虚线描边；stroke-dashoffset 表示虚线的起始偏移。

.device { position: absolute;top: 43%;left: 50%;margin: -200px 0 0 -200px;stroke-dasharray: 4000;stroke-dashoffset: 4000;-webkit-animation: dash 2s infinite;animation: dash 2s infinite; }
    @-webkit-keyframes dash {
      100% { stroke-dashoffset: 0; }
    }
    @keyframes dash {
      100% { stroke-dashoffset: 0; }
    }

点击查看全部代码

css 中的 clip-path

clip-path 按照路径内部的尺寸进行裁剪。只有路径内的内容可见。使用方法如下：

.element {
    clip-path: polygon(...); /* 或者其他的图形函数 */
}

<!-- 其他图形函数语法 -->
circle: circle(radius at x-axis y-axis)
ellipse: ellipse(x-rad y-rad at x-axis y-axis)
polygon: polygon(x-axis y-axis, x-axis y-axis, … )
inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

DEMO1:
clippath

利用伪元素:before 和:after 实现相同大小相同位置的文字，使用 clip-path 分别裁剪文字：

.txt { display: inline-block;position: relative;font-size: 70px;text-transform: uppercase;color: transparent; }
/* 此处省略代码 */	
.txt:before { -webkit-clip-path: polygon(0 0,100% 0,100% 100%);clip-path: polygon(0 0,100% 0,100% 100%); }
.txt:after { -webkit-clip-path: polygon(0 0,0 100%,100% 100%);clip-path: polygon(0 0,0 100%,100% 100%); }

点击查看全部代码

DEMO2：
clippath

如果结合 clip-path 和 keyframes 动画，可实现相关元素按照我们的路径逐步出现的效果。clip-path 可通过此工具 http://www.bennettfeely.com/clippy/ 实现复杂的路径。

 .line { position: absolute;left: 0;top: 0;width: 28px;height: 34px;background: url(line.png) 0 0 no-repeat;-webkit-animation: moveLine .8s ease infinite;animation: moveLine .8s ease infinite; }

@-webkit-keyframes moveLine {
  0% {
    -webkit-clip-path: polygon(0 100%, 0 100%, 0 100%);
  }
  25% {
    -webkit-clip-path: polygon(0 82%, 100% 81%, 100% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 73% 47%, 74% 64%, 99% 100%, 0 100%, 56% 77%, 64% 58%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0%, 72% 48%, 75% 70%, 100% 100%, 0 100%, 55% 78%, 5% 68%);
  }
  75% {
    -webkit-clip-path: polygon(28% 0, 100% 34%, 79% 100%, 0 100%, 0 0);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  }
}

点击查看全部代码

总结思考

本章主要介绍 svg 路径动画，svg 路径描边动画以及 css 中的 clip-path，从中我们也发现了路径的强大之处，如若能在项目中灵活使用，无非给动画添加更生动的效果。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

创建 Docker Swarm 集群

修复 passwd:Authentication token manipulation error 的步骤

如何退出无响应的 ssh 会话

JAVA 常用对象 Api

Maven 中 optional 关键字

深入理解并行编程 PDF 文档

JavaScript 忍者禁术 Secrets of the JavaScript Ninja 中文版 v1.0

React.js 最佳实践 2016

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

小霸王臭丫头

暂无简介

0 文章
0 评论
23 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

有深☉意

文章 0 评论 0

硪扪都還晓

文章 0 评论 0

DS

文章 0 评论 0

我也只是我

文章 0 评论 0

TangBin

文章 0 评论 0

橪书

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文