canvas绘制svg矢量图片,svg在html5中应用
VG代表可缩放矢量图形，这是一种用于描述2D图形的语言。图形应用用XML编写，然后用SVG阅读器程序呈现XML。
SVG主要用于矢量图，比如饼状图，X和Y坐标系下的二维图表等等。
SVG于2003年1月14日成为W3C推荐的标准。你可以在SVG规范页面查看最新版本的SVG规范。
查看 SVG 文件大多数Web浏览器可以显示SVG，就像它们可以显示PNG、GIF和JPG图形一样。IE用户可能需要安装Adobe SVG reader才能在浏览器中查看SVG。
在HTML5中嵌入SVG
5 HTML5允许我们使用__svg直接嵌入SVG./svg标记。下面是简单的语法：
XML/HTML代码将内容复制到剪贴板SVG Xmlns= 3358 www.w3.org/2000/SVG./SVGHTML5 - SVG 圆下面是一个SVG示例的HTML5版本，用circle标记画了一个圆：
XML/HTML代码将内容复制到剪贴板！doctype html head titles SVG/title meta charset= utf-8 //head body H2 HTML5 SVG circle/H2 svgid= SVG elem height= 200 xmlns= http://www . w3 . org/2000/SVG circleid= red circle CX= 50 cy= 50 r= 50 fill= red //SVG/body/html在启用html 5的最新版本的FireFox中
HTML5 - SVG 矩形下面是一个SVG示例的HTML5版本，用rect标签绘制一个矩形：
XML/HTML代码将内容复制到剪贴板！doctype html head title SVG/title meta charset= utf-8 //head body H2 HTML5 SVG rectangle/H2 svgid= SVG elem height= 200 xmlns= http://www . w3 . org/2000/SVG rect ID= redirect width= 300 height= 100 fill= red /SVG/body/html在启用了html 5的最新版本的FireFox中，将会出现以下结果
HTML5 - SVG 线条下面是一个SVG示例的HTML5版本，用line标签画了一条线：
XML/HTML代码将内容复制到剪贴板！doctype html head title SVG/title meta charset= utf-8 //head body H2 html 5 svgline/H2 svgid= SVG elem height= 200 xmlns= http://www . w3 . org/2000/SVG line x1= 0 y1= 0 x2= 200 y2= 100 style= stroke:red；Stroke-width:2//svg /body /html您可以使用style属性为其设置附加的样式信息，比如笔画、填充颜色、笔画宽度等等。
在启用HTML5的最新版本的FireFox中，将生成以下结果：
HTML5 - SVG 椭圆下面是一个SVG示例的HTML5版本，使用ellipse标记绘制一个椭圆：
XML/HTML代码将内容复制到剪贴板！doctype html head title SVG/title metacherset= utf-8 //head body H2 HTML5 svgelipse/H2 svgid= SVG elem height= 200 xmlns= http://www . w3 . org/2000/SVG ellipse CX= 100 cy= 50 rx= 100 ry= 50 fill= red //SVG/body/html在最新版本的FireFox中使用html 5
HTML5 - SVG 多边形下面是一个SVG示例的HTML5版本，用polygon标签绘制一个多边形：
XML/HTML代码将内容复制到剪贴板！doctype html head title SVG/title metacherset= utf-8 //head body H2 HTML5 SVG polygon/H2 svgid= SVG elem height= 200 xmlns= http://www . w3 . org/2000/SVG polygon points= 20，10300，20，170，50 fill= red /SVG/body/html在启用了html 5的最新版本的FireFox中，会出现以下结果
HTML5 - SVG 折线这是一个SVG示例的HTML5版本，使用polyline标记绘制了一个折线图：
XML/HTML代码将内容复制到剪贴板！在最新版本的fill中，doctype html head title SVG/title meta charset= utf-8 //head body H2 html 5 SVG polyline/H2 svgid= SVG elem height= 200 xmlns= http://www . w3 . org/2000/SVG polyline points= 0，00，2020，2020，4040，4040，60 fill= red /SVG/body/html
HTML5 - SVG 渐变下面是一个SVG示例的HTML5版本，用ellipse标签画了一个椭圆，用radialGradient标签定义了一个SVG radialGradient。
以类似的方式，我们可以用linearGradient标签创建SVG线性渐变。
XML/HTML代码复制内容到剪贴板！doctype html head title SVG/title meta charset= utf-8 //head body H2 html 5 svggradientellipse/H2 svgid= SVG elem height= 200 xmlns= http://www .w3。org/2000/SVG defs径向渐变id= gradient CX= 50% cy= 50% r= 50% FX= 50% fy= 50% stop offset stop-opacity:0 /stop offset= 100% style= stop-color:RGB(0，0，255)；stop-opacity:1 //radial gradient/defs ellipsecx= 100 cy= 50 rx= 100 ry= 50 style= fill:URL(# gradient)//SVG/body/html在启用HTML5的最新版火狐浏览器中会生成如下结果：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。