HTML5 - SVG矢量

HTML5 - SVG矢量 首页 / HTML5入门教程 / HTML5 - SVG矢量

SVG表示 S 可缩放的 V 矢量 G 图形,它是一种用于描述XML中的2D图形和图形应用程序的语言,由SVG查看器呈现。

SVG对于矢量类型图(如饼图,X,Y坐标系中的二维图等)最有用。

查看SVG文件

大多数网络浏览器可以显示SVG,就像显示PNG,GIF和JPG一样。 Internet Explorer用户可能必须安装 Adob​​e SVG Viewer 能够在浏览器中查看SVG。

HTML5嵌入SVG

HTML5允许使用<svg> ... </svg>标签直接嵌入SVG,该标签具有以下简单语法-

<svg xmlns="http://www.w3.org/2000/svg">
   ...    
</svg>

HTML5-SVG Circle

以下是SVG示例的HTML5版本,该示例将使用<circle>标签绘制一个圆圈-

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

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>

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

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

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的最新版Firefox中产生以下输出。

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的最新版Firefox中产生以下输出。

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

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

HTML5-SVG Gradients

以下是SVG示例的HTML5版本,该示例将使用<ellipse>标签绘制一个椭圆,并使用<radialGradient>标签定义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版本,该示例将使用<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>

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入浅出gRPC -〔李林锋〕

ZooKeeper实战与源码剖析 -〔么敬国〕

深入浅出云计算 -〔何恺铎〕

Java业务开发常见错误100例 -〔朱晔〕

OAuth 2.0实战课 -〔王新栋〕

用户体验设计实战课 -〔相辉〕

性能优化高手课 -〔尉刚强〕

Go 语言项目开发实战 -〔孔令飞〕

讲好故事 -〔涵柏〕

好记忆不如烂笔头。留下您的足迹吧 :)