如何使用HTML5进行SVG矢量图形替换

这篇文章主要讲解了“如何使用HTML5进行SVG矢量图形替换”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用HTML5进行SVG矢量图形替换”吧!

成都创新互联专业为企业提供建瓯网站建设、建瓯做网站、建瓯网站设计、建瓯网站制作等企业网站建设、网页设计与制作、建瓯企业网站模板建站服务,十年建瓯做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

VG表示可伸缩矢量图形,这是一门用于描述2D图形的语言,图形应用使用XML编写,然后XML由SVG阅读器程序呈现。

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

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

查看SVG文件

大多数Web浏览器都可以显示SVG,就像它们可以显示PNG,GIF以及JPG图形。IE用户可能需要安装Adobe SVG阅读器能够使浏览器中查看SVG。

在HTML5中嵌入SVG HTML5允许我们直接使用__ ... 标签嵌入SVG,下面是简单的语法:

XML / HTML代码将内容复制到文本

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

...       

  

HTML5-SVG圆

下面是一个SVG示例的HTML5版本,用标签放置一个圆:

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG圈子  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    < circle id = “ redcircle” cx = “ 50” cy = “ 50” r = “ 50” fill = “ red” />        

  

  

  

在启用HTML5的最新版本FireFox中会生成如下结果:

2016219112130340.jpg(223×186)

HTML5-SVG矩形

下面是一个SVG示例的HTML5版本,用标签放置一个矩形:

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG矩形  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    < rect id = “ redrect”宽度= “ 300”高度= “ 100” fill = “ red” />       

  

  

  

在启用HTML5的最新版本FireFox中会生成如下结果:

2016219112200272.jpg(316×152)

HTML5-SVG

线条下面是一个SVG示例的HTML5版本,用标签放置一个线条:

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG行  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    <行x1 = “ 0” y1 = “ 0” x2 = “ 200” y2 = “ 100”      

          style = “ stroke:red; stroke-width:2” />  

  

  

  

您可以使用style属性给它设置额外的样式信息,某些笔画,填充色,笔画宽度等等。

在启用HTML5的最新版本FireFox中会生成如下结果:

2016219112220725.jpg(217×159)

HTML5-SVG椭圆

下面是一个SVG示例的HTML5版本,用标签放置一个椭圆:

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG椭圆  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    <椭圆cx = “ 100” cy = “ 50” rx = “ 100” ry = “ 50” fill = “红色” />        

  

  

  

在启用HTML5的最新版本FireFox中会生成如下结果:

2016219112240763.jpg(225×148)

HTML5-SVG

顶部下面是一个SVG示例的HTML5版本,用标签放置一个附加:

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG多边形  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    <多边形点= “ 20,10 300,20,170,50”填充= “红色” />      

  

  

  

在启用HTML5的最新版本FireFox中会生成如下结果:

2016219112258796.jpg(310×118)

HTML5-SVG折线

下面是一个SVG示例的HTML5版本,用标签放置一个折线图:

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG折线  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

 <折线点= “ 0,0 0,20 20,20 20,40 40,40 40,60”填充= “红色” />     

  

  

  

在启用HTML5的最新版本FireFox中会生成如下结果:

2016219112318049.jpg(245×114)

HTML5-SVG

滚动下方是一个SVG示例的HTML5版本,用标签放置一个椭圆,使用标签定义一个SVG径向尺寸。

我们可以以类似的方式用标签创建SVG线性变量。

XML / HTML代码将内容复制到文本

<!DOCTYPE html >  

<头>  

< title > SVG   

< meta charset = “ utf-8” />    

  

<身体>  

< h3 > HTML5 SVG渐变椭圆  

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

        

     

   <椭圆cx = “ 100” cy = “ 50” rx = “ 100” ry = “ 50”        

      样式= “ fill:url(#gradient)” />   

  

  

  

感谢各位的阅读,以上就是“如何使用HTML5进行SVG矢量图形替换”的内容了,经过本文的学习后,相信大家对如何使用HTML5进行SVG矢量图形替换这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享名称:如何使用HTML5进行SVG矢量图形替换
分享地址:http://myzitong.com/article/pjsgdg.html