视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用HTML5进行SVG矢量图形绘制的入门教程_html5教程技巧
2020-11-27 15:19:47 责编:小采
文档
点击下载本文 文档为doc格式
 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 Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2. ... 
    3. 
 
  3.  
    4. 





HTML5 - SVG 圆
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个圆：


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Circle
     
    8. 
 
  8.  
    9. 
 
  9.   
    10. 
 
  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 





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



HTML5 - SVG 矩形
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个矩形：


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Rectangle
     
    8. 
 
  8.  
    9. 
 
  9.   
    10. 
 
  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 





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



HTML5 - SVG 线条
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个线条：


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Line
     
    8. 
 
  8.  
    9. 
 
  9.  
 
  10.  style="stroke:red;stroke-width:2"/> 
    11. 
 
  11.  
    12. 
 
  12.  
    13. 
 
  13.  
    14. 





你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。


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



HTML5 - SVG 椭圆
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个椭圆：


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Ellipse
     
    8. 
 
  8.  
    9. 
 
  9.   
    10. 
 
  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 





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



HTML5 - SVG 多边形
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个多边形：


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Polygon
     
    8. 
 
  8.  
    9. 
 
  9.   
    10. 
 
  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 





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



HTML5 - SVG 折线
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个折线图：


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Polyline
     
    8. 
 
  8.  
    9. 
 
  9.   
    10. 
 
  10.  
    11. 
 
  11.  
    12. 
 
  12.  
    13. 





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



HTML5 - SVG 渐变
下面是一个 SVG 示例的 HTML5 版本，用  标签绘制一个椭圆，使用  标签定义一个 SVG 径向渐变。


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


XML/HTML Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3. SVG 
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 
 
  7. HTML5 SVG Gradient Ellipse
     
    8. 
 
  8.  
    9. 
 
  9.   
    10. 
 
  10.  
 
  11.  fx="50%" fy="50%"> 
    12. 
 
  12.   stop-opacity:0"/> 
    13. 
 
  13.   stop-opacity:1"/> 
    14. 
 
  14.   
    15. 
 
  15.   
    16. 
 
  16.  
 
  17.  style="fill:url(#gradient)" /> 
    18. 
 
  18.  
    19. 
 
  19.  
    20. 
 
  20.  
    21. 





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





下载本文
显示全文
专题
动视 51dongshi.net 版权所有
Copyright © 2019-2025