//相当于一个让舞台是svg能展示效果的区域 viewBox="280,80,20,20" //起点x轴为280，y轴80，宽20，高20的区域在svg中截图并且铺满svg viewport与preserveaspectratio http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/ http://www.drawsvg.org/ svg在线绘图 http://editor.method.ac/ svg css属性 fill: orange //填充颜色 stroke: black //边框颜色 stroke-width: 3 //边框大小 stroke-dasharray: 10, 5 //虚线间隔 stroke-opacity: //表示描边透明度 stroke-linecap //表示描边端点表现方式stroke-linejoin stroke-linejoin //表示描边转角的表现方式 stroke-miterlimit http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%https://css-tricks.com/guide-svg-animations-smil/84/ svg animate简单动画 3秒后 沿X轴移动到 60px位置 //可以在特定时间之后修改某个属性值（也可以是CSS属性值） //废弃可以实现它的效果 //跟css的Transform一样 //让SVG各种图形沿着特定的path路径运动 ----------------------------------------------------------------- 例子： 马 //3秒X值设置为60 ----------------------------------------------------------------- 例子： ------------------------------------------------------------------ 例子： 马 ---------------------------------------------------------------- 效果组合例子： 马 --------------------------------------------------------------- animate 属性 attributeName = //要变化的元素属性名称 attributeType = “CSS | XML | auto” //用来表明attributeName属性值的列表，要写css还是写svg,例如css是style="height:100px",XML是height=100 from = // to = // begin= // dur= // calcMode= // repeatCount= // 动画执行次数 repeatDur= //重复动画的总时间 fill= // 动画结束后是否保持结束后的状态 https://css-tricks.com/guide-svg-animations-smil/