SVG可伸缩矢量图形

总结

1、svg就像普通标签那么使用

2、svg是xml

3、svg是矢量图，而canvas是位图

学习要点

对HTML5中的SVG有初步的了解

什么是SVG

简单的说SVG文档就是一些可以被直接嵌入到页面中的XML文档;

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言,Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

实例

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8-23 课堂演示</title>
 6     <style type="text/css">
 7         svg{
 8             background: rgba(100,50,30,0.4);
 9         }
10     </style>
11 </head>
12 <body>
13     <!-- viewBox SVG绘图区域。由空格或逗号分隔的4个值。 (min x, min y, width, height)"  -->
14     <svg width="200" viewBox='0,0,200,200'>
15         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="orange" />
16         <ellipse cx="100" cy="100" rx="80" ry="50" style="fill:yellow;stroke:purple;stroke-2"/>
17     </svg>
18     <svg width="200" height="200"  viewBox="0 0 120 120"
19         xmlns="http://www.w3.org/2000/svg" version="1.1"
20         xmlns:xlink="http://www.w3.org/1999/xlink" >
21         <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
22         stroke="blue" stroke-width="2" 
23         fill="none" id="theMotionPath"/>
24         <circle cx="10" cy="110" r="3" fill="green"  />
25         <circle cx="110" cy="10" r="3" fill="green"  />
26         <circle cx="" cy="" r="5" fill="orange">
27 
28             <animateMotion dur="6s" repeatCount="indefinite">
29                <mpath xlink:href="#theMotionPath"/>
30             </animateMotion>
31         </circle>
32     </svg>
33 </body>
34 </html>

View Code