首先是viewbox的概念
你最终在浏览器上看到的图像，并不是你通过svg元素中path 之类的元素所定义的图像，或者说你并不是直接看到图像，而是通过一个叫做viewbox的东西，通过viewbox在画布上截取一块区域，然后放到浏览器中svg元素的内容区域中显示，根据align和meetorslice选项来确定填充的方式.一般情况下若不希望填充后的图像发生缩放，应当使viewbox和svg元素的尺寸保持一致
meet的意思是填充的时候并不要求viewbox的边界不会超出svg元素的边界，slice的意思是无论怎样都要viewbox都要填满svg元素，多出来的部分被裁掉
path 中
a命令表示arc laf表示大弧还是小弧，sf表示顺时针还是逆时针 最后两个参数总是结束点的坐标，这在好多命令中都是相同的，即path命令的最后两个参数总是线条结束点的位置，综合起来a命令是这样的格式
a rx ry r laf sf x y
q cpx cpy x y二次贝塞尔曲线
c cpx cpy cp2x cp2y x y三次贝塞尔曲线
T 和S分别是光滑二次和光滑三次贝塞尔曲线
text标签的dx dy属性用于控制单个字母的偏移
旋转的圆圈
<!DOCTYPE html> <html> <head> <title>viewbox 演示</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> </head> <body> <svg width="100%" height="1000" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path stroke="#f0f0f0" fill="none" d="M0,0H20V20" /> </pattern> </defs> <rect width="1200" height="1000" fill="url(#grid)"></rect> <text style="font-size:14px" id="sintext" x="400" y="400">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text> </svg> </body> </html> <script> var n=26; var x=[]; var y=[]; var pi=3.1415936; var a=2*pi/26; var r=200; var t=0; function arrange(t){ x=[]; y=[]; lx=0; ly=0; for(i=0;i<n;i++){ nx=r*Math.cos(a*i+t); ny=r*Math.sin(a*i+t) x.push(nx-lx-7); lx=nx; y.push(ny-ly); ly=ny; } } function render(){ sintext.setAttribute("dx",x.join(" ")); sintext.setAttribute("dy",y.join(" ")); } function frame(){ t+=0.01; arrange(t); render(); requestAnimationFrame(frame); } frame(); </script>
tspan相当于span就是单独控制一节文字的样式
svg动画可以将animate标签加入到需要动画的元素中，或者使用xlink:href="url(#target)"链接到需要动画的元素
