目录

HTML5 - SVG

SVG代表S calable V ector G raphics,它是一种用XML描述2D图形和图形应用程序的语言,然后由SVG查看器呈现XML。

SVG主要用于矢量类型图,如饼图,X,Y坐标系中的二维图等。

SVG成为W3C推荐标准14. 2003年1月,您可以在SVG规范中查看最新版本的SVG规范

查看SVG文件

大多数Web浏览器都可以显示SVG,就像它们可以显示PNG,GIF和JPG一样。 Internet Explorer用户可能必须安装Adobe SVG Viewer才能在浏览器中查看SVG。

在HTML5中嵌入SVG

HTML5允许使用《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版本,它将使用标记绘制一个圆圈 -

<!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的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG矩形

以下是使用标签绘制矩形的SVG示例的HTML5版本 -

<!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的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG Line

以下是SVG示例的HTML5版本,它将使用标记绘制一条线 -

<!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>

您可以使用style属性,该属性允许您设置其他样式信息,如笔触和填充颜色,笔划宽度等。

这将在启用HTML5的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG Ellipse

以下是SVG示例的HTML5版本,它将使用标记绘制椭圆 -

<!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的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG多边形

以下是使用标签绘制多边形的SVG示例的HTML5版本 -

<!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的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG折线

以下是SVG示例的HTML5版本,它将使用标记绘制折线 -

<!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,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG渐变

以下是SVG示例的HTML5版本,它将使用标记绘制椭圆,并使用标记来定义SVG径向渐变。

同样,您可以使用标签创建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,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

新页面打开

HTML5 - SVG Star

以下是SVG示例的HTML5版本,它将使用标记绘制星形。

<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>

这将在启用HTML5的最新版Firefox中产生以下结果。

新页面打开
↑回到顶部↑
WIKI教程 @2018