SVG代表 S calable V ector G raphics,它是一种用于描述XML中的2D图形和图形应用程序的语言.然后由SVG查看器呈现XML.
SVG主要用于矢量类型图,如饼图,X,Y坐标系中的二维图等.
SVG成为W3C推荐标准14.
查看SVG文件
大多数Web浏览器都可以显示SVG,就像它们可以显示一样PNG,GIF和JPG. Internet Explorer用户可能必须安装 Adobe SVG Viewer 才能在以下位置查看SVG使用< svg> ...</svg> 标签,其中包含以下简单语法 :
<svg xmlns = "http://www.w3.org/2000/svg"> ... </svg>
Firefox 3.7还引入了一个配置选项("about:config"),您可以使用以下步骤启用HTML5 :
在您的Firefox地址栏中输入 about:config .
点击"我会小心,我保证!"出现的警告消息上的按钮(并确保您遵守它!).
在过滤器中键入 html5.enable 页面顶部的栏.
目前它已被禁用,因此请点击它以将值切换为true.
现在应启用Firefox HTML5解析器,您应该可以尝试以下示例.
HTML5 - SVG Circle
以下是SVG示例的HTML5版本,它将使用< circle> tag绘制圆圈 :
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Circle</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" /> </svg> </body> </html>
HTML5 − SVG Rectangle
以下是SVG示例的HTML5版本,该示例将使用<rect>标签绘制矩形
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Rectangle</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <rect id = "redrect" width = "300" height = "100" fill = "red" /> </svg> </body> </html>
HTML5 − SVG Line
以下是SVG示例的HTML5版本,该示例将使用<line>标签绘制一条线
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Line</h2> <svg id = "svgelem" 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>
您可以使用样式属性,该属性允许您设置其他样式信息,例如笔触和填充颜色,笔触的宽度等。
HTML5 − SVG Ellipse
以下是SVG示例的HTML5版本,该示例将使用<ellipse>标签绘制一个椭圆
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-40%); -ms-transform: translateX(-40%); transform: translateX(-40%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Ellipse</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" /> </svg> </body> </html>
HTML5 − SVG Polygon
以下是SVG示例的HTML5版本,该示例将使用<polygon>标签绘制多边形
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Polygon</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <polygon points = "20,10 300,20, 170,50" fill = "red" /> </svg> </body> </html>
HTML5 − SVG Polyline
以下是SVG示例的HTML5版本,该示例将使用<polyline>标签绘制一条折线
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Polyline</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <polyline points = "0,0 0,20 20,40 40,60" fill = "red" /> </svg> </body> </html>
HTML5 − SVG Gradients
以下是SVG示例的HTML5版本,该示例将使用<ellipse>标签绘制椭圆,并使用<radialGradient>标签定义SVG径向渐变。
同样,您可以使用<linearGradient>标签创建SVG线性渐变。
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-40%); -ms-transform: translateX(-40%); transform: translateX(-40%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Gradient Ellipse</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <defs> <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%"> <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset = "100%" style = "stop-color:rgb(0,255); stop-opacity:1"/> </radialGradient> </defs> <ellipse cx = "100" cy = "50" rx = "100" ry = "50" style = "fill:url(#gradient)" /> </svg> </body> </html>
HTML5 − SVG Star
以下是SVG示例的HTML5版本,该示例将使用<polygon>标签绘制星形。
<html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-40%); -ms-transform: translateX(-40%); transform: translateX(-40%); } </style> <title>SVG</title> <meta charset = "utf-8" /> </head> <body> <h2 align = "center">HTML5 SVG Star</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/> </svg> </body> </html>