走进svg
首先是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)"链接到需要动画的元素
相信世界是平的
谨记四个字“修身养性”
大江东去浪淘尽英雄,再牛B的人物最后也是一掊土
向善不是目的,而是抚慰心灵,更多的感受幸福,感谢别人给你行善的机会
相信老子的话:万物生于有,有生于无,一切的道理都源于一个无法证明的假设
我是好是坏就自然而然的摆在那里,并不会因为别人的评价而改变什么,我也不需要别人用一张纸来说明我什么,世间最难得的是自由
谨记四个字“修身养性”
大江东去浪淘尽英雄,再牛B的人物最后也是一掊土
向善不是目的,而是抚慰心灵,更多的感受幸福,感谢别人给你行善的机会
相信老子的话:万物生于有,有生于无,一切的道理都源于一个无法证明的假设
我是好是坏就自然而然的摆在那里,并不会因为别人的评价而改变什么,我也不需要别人用一张纸来说明我什么,世间最难得的是自由
支持大额赞助:
![](https://images.cnblogs.com/cnblogs_com/sky-view/883309/o_%E6%97%A0%E6%A0%87%E9%A2%98.png)