???? SVG 根本介绍
SVG (Scalable Vector Graphics)
现在可缩放的矢量图（SVG）在 Web 页面上充当着重要的角色，SVG 图标、SVG 图像、SVG 图案、SVG 动画甚至是简单的数据可视化图表都能够由 SVG 进行绘制。
SVG 个性：
- Responsive
因为 SVG 是矢量图像，能够有限缩放图像内容而不失真，这样在任何终端看到的图像都是高清的；
- Performance
SVG 能够进行优化，通过缩小不必要的属性或者门路中的点或图形，让文件尺寸更小；
- Interactive
SVG 代码是 XML 语言进行形容的，能够联合 CSS 以及 JavaScript 进行交互；
- Designable
业界有十分弱小的设计工具能够将设计好的 SVG 图像输入为 SVG 代码，比方 Adobe Illustrator、Sketch、InkScape 等。SVG 领有对设计师和开发者都敌对的内容输入；
- Visualization
通过联合数据，SVG 也能够实现简单的数据可视化图表，比方: ECharts SVG Version / D3.js 都是应用 SVG 进行图表绘制。
SVG 根本图形
<?xml version="1.0" encoding="UTF-8"?>
<svg width="960px" height="160px" viewBox="0 0 960 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>shape page</title>
<g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="rect" stroke="#979797" fill="#D8D8D8" x="0.5" y="0.5" width="159" height="159"></rect>
<circle id="circle" stroke="#979797" fill="#D8D8D8" cx="280" cy="80" r="79.5"></circle>
<path d="M480,0.525731112 L433.286197,15.7039659 L404.415479,55.4411003 L404.415479,104.5589 L433.286197,144.296034 L480,159.474269 L526.713803,144.296034 L555.584521,104.5589 L555.584521,55.4411003 L526.713803,15.7039659 L480,0.525731112 Z" id="decagon" stroke="#979797" fill="#D8D8D8"></path>
<path d="M680,1.12977573 L656.820623,48.0963241 L604.989959,55.6277604 L642.49498,92.1861198 L633.641245,143.807352 L680,119.435112 L726.358755,143.807352 L717.50502,92.1861198 L755.010041,55.6277604 L703.179377,48.0963241 L680,1.12977573 Z" id="star" stroke="#979797" fill="#D8D8D8"></path>
<line x1="800.5" y1="159.5" x2="960" y2="4" id="line" stroke="#979797" stroke-linecap="square"></line>
</g>
</svg>下面代码会绘制出以下图形
能够下 CodePen 上进行尝试 ????
https://codepen.io/xiaoluobod…
SVG 根本图形 包含：
- rect – 矩形
- circle – 圆形
- ellipse – 椭圆
- line – 线条
- polyline – 折线
- polygon – 多边形
- path – 门路
SVG 坐标零碎
以下例子都是基于下面根本图形的 SVG 代码，根本图形定义如下：
viewport为 960px * 160pxviewBox为 0, 0, 960 160
咱们晓得 5 个图形是在长 960px、宽 160px 的矩形区域内的。
viewport
SVG 的视口范畴（viewport）由 width、height 属性申明，定义了 SVG 文档的可视宽高，如果 SVG 元素不申明 viewport，则浏览器默认给定宽高为 300px * 150px。
viewport = 300px * 150px
viewbox
SVG 元素的 viewBox 是个弱小的属性，它定义了 SVG 真正意义上具备可缩放的个性，viewBox 的属性由四个属性组成 <min-x>、<min-y>、width、height，不难看出，这四个属性就和坐标系、以及可视区域的宽高有关系。<min-x>、<min-y> 决定了 SVG 在坐标系中的地位，width、height 决定了 viewBox 的宽高。从而造成一个可见的矩形区域。
实际上，当 SVG 元素不申明 viewBox 属性时，SVG 的可视范畴就是 viewport 大小。
<svg width="960px" height="160px">
<title>shape page</title>
<g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<!-- some shapes -->
</g>
</svg>
viewport 等于 viewbox 时
当初始化 viewBox 的坐标系为 0 0 并且宽高申明等于 viewport 时，等同于没有设置 viewBox。显示成果是一样的。
<svg width="960px" height="160px" viewBox="0 0 960 160">
<title>shape page</title>
<g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<!-- some shapes -->
</g>
</svg>
viewport 大于 viewbox 时，SVG 放大了
假如 viewBox 设定为 viewport 的一半时
<svg width="960px" height="160px" viewBox="0 0 480 80">
<title>shape page</title>
<g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<!-- some shapes -->
</g>
</svg>
viewport 小于 viewbox 时，SVG 放大了
假如 viewBox 设定为 viewport 的2倍时
<svg width="960px" height="160px" viewBox="0 0 1920 160">
<title>shape page</title>
<g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<!-- some shapes -->
</g>
</svg>
深刻理解 SVG坐标零碎
Sara Soueidan 写过一个系列，Understanding SVG Coordinate Systems and Transformations 有趣味的童鞋，倡议残缺浏览下。
还有一个十分棒的在线例子，帮忙你理解 SVG 坐标零碎
SVG Coordinate Systems & Transformations (Part 1)
SVG 动画
SMIL 或者 CSS 还是 JavaScript?
| 技术 | 形容 | 备注 |
|---|---|---|
| SMIL | SMIL 规范行将废除，尽量不要应用 | Chrome 45当前弃用了SMIL |
| CSS | CSS 还只能实现简略的动画 | – |
| JavaScript | 简单动画就要用到 JS了 | – |
能够实现什么类型的 SVG 动画?
- Transform（scale、rotate、translate 、skew）
- 门路动画 （path）
- 描边动画（stroke）
- 形态变动（Morphing)
- 蒙版动画（Mask）
- 色彩管制（color / background-color / opacity)
优良的 SVG 类库
| 类库 | 形容 |
|---|---|
| GSAP | Sarah Drasner Recommend, The best one. |
| Snap.svg | The “jQuery” of SVG |
| Velocity.js | Velocity offers a lot of the sequencing that GreenSock does, but without a lot of the bells and whistles |
| React-Motion | React TechStack |
| Vivus.js | Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn |
| anime.js | Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. |
| SVG.js | The lightweight library for manipulating and animating SVG. |
| d3.js | Bring data to life with SVG, Canvas and HTML. |
| Sprite.js | SpriteJS 是跨平台的高性能图形系统，它可能反对web、node、桌面利用和小程序的图形绘制和实现各种动画成果。 |
此小册动画实战系列采纳 GSAP 进行动画开发。OK，兴许你奇怪为什么偏偏抉择了GSAP，后续章节会进行介绍，《???? 应用 GreenSock 制作动画 》
参考
- https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
- https://www.sarasoueidan.com/blog/svg-coordinate-systems/
对于
此小册是《SVG 动画开发实战》 系列文章第一章。
Notion 版本
小册是在 Notion 上实现撰写的，所以我保留了 Notion 的分享版本，你也能够点击这里查看。
GitHub 版本
小册提供了 GitHub 版本的在线浏览体验，传送门
微信公众号版本
关注我的技术公号，同样也能够找到此小册系列，目前在更新中。。。
发表回复