刚学了两天svg基础，随手记个笔记，通过改变svg锚点路径创作动画效果，今天的demo是一个播放和暂停的按钮
动画的原理，无论是帧动画，还是位移动画，无非就是将一个图形从a状态转变为b状态的一个过程
首先想象一下播放和暂停的按钮应该是什么样子的
通过动画，将暂停的画面改变为播放的画面，
因为涉及到图形的坐标和形状，这个比较考验空间想象力，我本身呢 这种想象力就不是很好，所以在ps里画了一个草图，用来计算尺寸和坐标，作为辅助，
现在来画背景的圆，
<svg width="100%" height="100%"><circle class="bgI" cx="50" cy="50" r="50" fill="#000"/></svg>
圆的中心点在svg的左上角50，50的位置开始，半径为50，填充色黑色，
再来画白色的三角形，这里的处理是将白色的三角形用两个四边形的路径组合，这样方便之后的动画
接下来标注用ps标注一下各个锚点的坐标，从0，0开始
由图中可以看出 左边(.left)的白色四边形的坐标分别为 32,21 51,32 54,68 33,80(顺时针)
右边的(.right)的白色三角形(暂且先看成三角形)的坐标分别为 54,32 85,50 54,68(顺时针)
为什么说是暂且看成三角形呢 因为之后我们写path坐标的时候需要些四个 只不过 第二个和第三个是同一个坐标点，现在可以写代码了，因为我不习惯在标签内写样式或者路径，所以提出来 在style中去写，
<svg width="100%" height="100%"><circle class="bgI" /><path class="left" /><path class="right" /></svg>
* {margin: 0;padding: 0;}body,html {height: 100%;}.bgI {cx: 50;cy: 50;r: 50;fill: #000;}.left,.right {fill: #fff;}.left {d: path('M32,21 54,32 54,68 33,80Z')}.right {d: path('M54,32 85,50 85,50 54,68Z')}
这样就做成暂停按钮，
接下来需要做的就是播放按钮，
同样是标注坐标，
分析一下，从暂停到播放过程中的锚点的改变
将播放按钮的锚点路径写在变化后的样式，点击变话有很多种方式 js、jq、css都可以，这里 咱们通过复选框的:checked属性进行控制
* {margin: 0;padding: 0;}body,html {height: 100%;}.bgI {cx: 50;cy: 50;r: 50;fill: #000;}.left,.right {fill: #fff;transition:all 0.2s linear 0.1s ;}.left {d: path('M32,21 54,32 54,68 33,80Z')}.right {d: path('M54,32 85,50 85,50 54,68Z')}#checked{display:none;}input:checked+svg{}input:checked+svg .left{d: path('M25,21 44,21 44,80 25,80Z')}input:checked+svg .right{d: path('M56,21 75,21 75,80 56,80Z')}
一个简单的暂停、播放按钮的动画就搞定啦
