摘要：基本的文档由根元素和基本形状元素构成作为的一种方言，必须正确的绑定命名空间在属性中绑定。另外，命令不用区分大小写三次贝塞尔曲线或分别是起点终点控制点。不过，可以实现其功能与效果，因此，此属性已经被废弃。可谓因为兄弟相争而年少陨落的天王。
原文链接：http://hangyangws.win/2017/04...基础认知
本文不能让你成为 SVG 大神，但是能让你知道、了解他「揭开神秘面纱」
SVG「Scalable Vector Graphics」表示「可缩放矢量图形『放大不模糊』」面向未来「W3C 标准」。
基本的 SVG 文档由 根元素和 基本形状元素 构成
作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。命名空间速成 获取更多信息
SVG 文件全局有效的规则是 「后来居上」，越后面的元素越可见。
动画、图形、渐变、旋转、滤镜、JavaScript 接口、各种超酷的动画…
和 HTML 使用的几种方式
不能使用JS来控制
.svg { background-image: url(xxx.svg);}
最好不使用 base64 格式化 SVG「阻塞其它资源」、不能使用 JS 控制
能使用JS来控制「推荐方式」
节省 HTTP 请求，能使用 JS 控制，不能被浏览器缓存
看图说话「原点在左上角」：
viewBox demo
动画理解：
深度阅读 - viewBox
CSS、JS 与 SVG 内敛样式 外链样式JS 操作 SVG
如果 SVG 代码作为 DOM 在 HTML 内部，可以向平常一样操作 DOM 操作 SVG
如果是使用 你可以使用 contentDocument 来控制它 SVG
注意
调用
…
SVG 形状元素来张图压压惊：
点我查看 SVG 元素的基本 DEMO
别说话，先举个 ? ，一起感受一下 path：点我
基于 path 的不同属性，可以画出各种各样的路径，所以 path 可算是 SVG 的「节点之王」
除了 path 之外的节点都「比较普通」，可以看成是对 path 的封装，比如「Rect、Circle…」
命令
命令都用一个关键字母来表示，命令 都有两种 表示方式
大写字母，表示采用「绝对定位」
小写字母，表示采用「相对定位『相对于上一个点』」
path 的命令列表document.getElementById(‘path’).getTotalLength() 得到路径长度
M：moveto 移动到
L：lineto 画线到；H：horizontal lineto 水平线到；V：vertical lineto 垂直线到
L 命令将会在当前位置和新位置之间画一条线段：L x y (or l dx dy)
还有两个简写命令：H，绘制平行线。V，绘制垂直线。这两个命令都只带一个参数，标明在 x 或 y 轴移动到的位置：H x (or h dx) 、V y (or v dy)
Z：closepath 关闭路径
Z 命令会从当前点画一条直线到路径的起点，所以它还是经常被放到路径的最后。另外，Z 命令不用区分大小写：Z (or z)
C：curveto 三次贝塞尔曲线
C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy
(x1, y1)、(x2, y2) 分别是起点、终点控制点。最后一个坐标 (x, y)，表示曲线的终点
三次贝塞尔曲线 表现形式 是：曲线沿着 起点开始 到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到 终点的方向结束
S：smooth curveto 光滑三次贝塞尔曲线
S 命令可以用来创建与之前那些曲线一样的贝塞尔曲线，通常和 C 命令一起使用
如果 S 命令跟在一个 C 命令或者另一个 S 命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点，不应该写出来，所以 S 省略了一个对称点
Q：quadratic Belzier curve 二次贝塞尔曲线
Q x1 y1, x y 或 q dx1 dy1, dx dy
T：smooth quadratic Belzier curveto 光滑二次贝塞尔曲线
T x y 或 t dx dy
T 命令类似于 S 命令，用于二次贝塞尔曲线。T 命令前面最好是一个 Q 命令，或者是另一个 T 命令
如果 T 多带带使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线
A：elliptical Arc 椭圆弧
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx ry：「椭圆」的 x，y半径
x-axis-rotation：X 轴旋转角度，顺时针为正数
large-arc-flag：1 表示用大弧度，0 表示小弧度
sweep-flag：弧度回话方向，1 顺时针，0 逆时针
x y：弧度终点
stroke
fill
transform
linearGradient
mask
filter
clipPath
一些 Demo：
svg 模糊 demo
symbol demo
symbol-use-demo
text mask demo
mask demo
clip demo
SVG 文字路径动画
linearGradient Demo
使用 CSS 请注意
把 background-color、border 改成 fill 和 stroke
上色和填充的部分一般是可以用 CSS 来设置的，比如 fill，stroke，stroke-dasharray，但不包括渐变和图案等。
另外，width、height，以及路径的命令等等，都不能用 css 设置
不是所有的属性都能用 CSS 来设置：SVG 规范 将属性区分成 properties 和 attributes，前者是可以用 CSS 设置的，后者不能
SVG 动画 集合
SVG 的动画元素是和 SMIL Synchronized Multimedia Integration Language开发组合作开发的。
SMIL 开发组和 SVG 开发组合作开发了 SMIL 动画规范，在规范中制定了一个基本的 XML 动画特征集合。
SVG 吸收了 SMIL 动画规范当中的动画优点，并提供了一些SVG继承实现。
大概三种实现方式：
JS 动画「DOM 操作『忽视它』」
CSS3 动画「animation、transition『不是 svg 的重点』」
SVG 本身的动画「基于 SMIL」「主要借助 SVG animate 相关标签」
setset 表示此元素没有动画效果 ???。
好吧：这样的，虽然 set 虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。
就是指：可以在特定时间之后修改某个属性值「也可以是 CSS 属性值」。
一个 Demo
animateSVG animation 最强大的地方在于：「只要在页面放几个 animate 元素，没有任何 CSS, 没有任何JS」
一个 Demo
animateColor一看就知道是颜色动画。不过，animate 可以实现其功能与效果，因此，此属性已经被废弃。
可谓因为兄弟相争而年少陨落的天王。逝者已矣，过去的就让它过去吧 ~~~
一个 Demo
animateMotionanimateMotion 元素可以让 SVG 各种图形沿着特定的 path 路径运动 ~~~
一个 Demo
例子分析组合：
一个 Demo
end 事件：
一个 Demo
click 事件：
一个 Demo
贝塞尔曲线原理「简单阐述」
工具推荐svgo
项目地址：点我查看
比较厉害的压缩优化 SVG 的工具，可以将 SVG 中的无用信息删掉，同时支持代码进行压缩
SVGOMG
展示地址：SVGOMG - SVGO"s Missing GUI
SVGOMG 是 svgo 的可视化界面工具，操作起来很方便，还提供了一些其他有用的功能
Snap.svg
项目地址：Snap.svg - Home
Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库，
可以写出更加复杂的 SVG 效果，同时文档超级齐全，推荐给想深入了解的同学。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51562.html
大家好，我们每天全网搜集各行各业的研究报告，了解一个行业从阅读这个行业的研报开始，今日分享目录如下： 20211006分享目录： 2021抖音电商商家经营方法论白皮书-34页.pdf 2021中国数据智能产业发展研究报告-50页.pdf 2021公益数字化转型-56页.pdf 2021年中国一线城市出行平台调研报告-77页.pdf 2021年中国内容机构（MCN）行业发展研究报告-66页.pd...
阅读 2457·2021-09-28 09:36
阅读 3597·2021-09-22 15:41
阅读 4382·2021-09-04 16:45
阅读 1954·2019-08-30 15:55
阅读 2846·2019-08-30 13:49
阅读 824·2019-08-29 16:34
阅读 2369·2019-08-29 12:57
阅读 1678·2019-08-26 18:42
