svg.txt

（1）教程

http://www.w3school.com.cn/svg/index.asp

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

https://www.w3cplus.com/svg/svg-animation-guide.html




（2）在对svg转化为图片时，不要用class定义元素的样式，否则在图片上不会显示class里定义的样式，只能使用行内样式（使用统一的style="......." 或  分开写）




  (3) 在写path时 M 后的整数值加0.5会使画出的线更细腻，比如 <path d="M100.5,200.5H400">



（4）svg transform 属性的使用方式：
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform




（5）svg path   ------   https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/





（6）https://www.cnblogs.com/xiaohuochai/p/7478595.html

var svgEl = document.createElementNS('http://www.w3.org/2000/svg', tagName);
svgEl.setAttributeNS('http://www.w3.org/1999/xlink', key, attr[key]);






（7）深度掌握SVG路径path的贝塞尔曲线指令
https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/




（8）两个很好的文章

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform  ------ 关于transform

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506182064.html  ------  SVG图像的viewport和viewBox用于设置图像可见区域的大小。




（9）svg动画

animate 普通属性动画；animateTransform变换属性动画；animateMotion路径动画

http://www.webhek.com/post/animated-line-drawing-in-svg.html

https://www.w3cplus.com/svg/svg-animation-guide.html

https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/