• 售前

  • 售后

热门帖子
入门百科

利用HTML5举行SVG矢量图形绘制的入门教程

[复制链接]
牛股行天下烁 显示全部楼层 发表于 2021-10-26 14:03:30 |阅读模式 打印 上一主题 下一主题
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>...</svg> 标签嵌入 SVG,下面是简朴的语法:
XML/HTML Code复制内容到剪贴板
       
  • <svg xmlns="http://www.w3.org/2000/svg">      
  • ...           
  • </svg>  
HTML5 - SVG 圆
下面是一个 SVG 示例的 HTML5 版本,用 <circle> 标签绘制一个圆:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 版本,用 <rect> 标签绘制一个矩形:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 线条
下面是一个 SVG 示例的 HTML5 版本,用 <line> 标签绘制一个线条:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 椭圆
下面是一个 SVG 示例的 HTML5 版本,用 <ellipse> 标签绘制一个椭圆:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 版本,用 <polygon> 标签绘制一个多边形:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 版本,用 <polyline> 标签绘制一个折线图:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 版本,用 <ellipse> 标签绘制一个椭圆,使用 <radialGradient> 标签定义一个 SVG 径向渐变。
我们可以以雷同的方式用 <linearGradient> 标签创建 SVG 线性渐变。
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <title>SVG</title>      
  • <meta charset="utf-8" />      
  • </head>      
  • <body>      
  • <h2>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 中会天生如下效果:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作