三天学会HTML5——SVG和Canvas的使用

最新推荐文章于 2025-06-26 09:31:21 发布

转载最新推荐文章于 2025-06-26 09:31:21 发布 · 1.3k 阅读

HTML+Javascript+CSS 专栏收录该内容

119 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas的使用方法，包括初始化、添加Canvas元素、创建JavaScript函数Draw等，并对比了Canvas与SVG的区别，如矢量图与位图、支持事件处理等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：http://blog.youkuaiyun.com/powertoolsteam/article/details/50633556

在第一天学习了HTML5的一些非常重要的基本知识，今天将进行更深层学习

首先来回顾第一天学习的内容，第一天学习了新标签，新控件，验证功能，应用缓存等内容。

第2天将学习如何使用Canvas 和使用SVG 实现功能

Lab1—— 使用Canvas

Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。

初始化

1. 创建HTML页面

<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">html</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>
<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">head</span><span class="kwrd" style="color: rgb(0, 0, 255);">></</span><span class="html" style="color: rgb(128, 0, 0);">head</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>
<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">body</span><span class="kwrd" style="color: rgb(0, 0, 255);">></</span><span class="html" style="color: rgb(128, 0, 0);">body</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>
<span class="kwrd" style="color: rgb(0, 0, 255);"></</span><span class="html" style="color: rgb(128, 0, 0);">html</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>

2. 在Body标签内添加Canvas

<canvas id=<span class="str" style="color: rgb(0, 96, 128);">"MyCanvas"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"border:1px solid black;"</span>>

</canvas>

3. 在<head>标签内添加Script 标签

<head>

<script type=<span class="str" style="color: rgb(0, 96, 128);">"text/javascript"</span>>

</script>

</head>

4. 在Script 标签内创建JavaScript 函数 Draw ，Draw函数能够访问Canvas 对象

function Draw()

{
        var ctx = document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).getContext(<span class="str" style="color: rgb(0, 96, 128);">"2d"</span>);      
        <span class="rem" style="color: rgb(0, 128, 0);">//Canvas Code Comes Here</span>
}

Lab 1.1 使用 Path

Path 由0个或多个Sub Path组成，每个Sub path 是是由一个或多个终点组成，每个终点是通过直线或曲线连接的。

Lab1.1.1 使用Single 创建Path;

脚本片段：

ctx.beginPath();

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.stroke();

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;

ctx.lineTo(25, 100);

ctx.stroke();

输出：

上述示例中Path 是由2个子路径组成的。

BeginPath—— 创建新路径

strokeStyle 用于设置样式

每次调用Stroke 方法，所有的子路径都会使用当前的Style 重新画。

Lab 1.1.2 使用Multiple Begin Path创建Path

核心代码：

ctx.beginPath();

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(75, 100);

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;

ctx.lineTo(25, 100);

ctx.stroke();

输出：

Lab1.1.3 理解ClosePath

核心代码：

ctx.beginPath();

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.closePath();

ctx.stroke();

输出：

Lab1.1.4 理解Fill

核心代码

ctx.beginPath();

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;

ctx.fill();

输出：

Lab1.1.5 画曲线

quadraticCurveTo 函数定义了四个参数，前两个点是控制点，用于曲率计算，后两个参数是终点的曲度核心代码：

ctx.beginPath();

ctx.moveTo(175, 50)

ctx.quadraticCurveTo(60, 360, 175, 300);

ctx.stroke()

输出：

Lab 1.2 使用Rectangle

Lab1.2.1 画矩形

ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"red"</span>;

ctx.fillRect(75, 75, 150, 150);

           

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"black"</span>;

ctx.lineWidth = 5;

ctx.strokeRect(175,175,150,150);

输出:

Lab1.2.2 清除矩形

代码：

ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"red"</span>;

ctx.fillRect(75, 75, 250, 250);

ctx.clearRect(125, 125, 100, 100);

输出

Lab 1.3 使用渐变色

Lab1.3.1 使用线性渐变色

var grd = ctx.createLinearGradient(75, 75, 225, 75);

grd.addColorStop(0, <span class="str" style="color: rgb(0, 96, 128);">"black"</span>);

grd.addColorStop(0.2, <span class="str" style="color: rgb(0, 96, 128);">"magenta"</span>);

grd.addColorStop(0.4, <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>);

grd.addColorStop(0.6, <span class="str" style="color: rgb(0, 96, 128);">"green"</span>);

grd.addColorStop(0.8, <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>);

grd.addColorStop(1, <span class="str" style="color: rgb(0, 96, 128);">"red"</span>);

ctx.fillStyle = grd

ctx.fillRect(75, 75, 150, 150);

输出

注意：

reateLinearGradient 包含四个参数x1,y1,x2,y2

1. 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。

2. 如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。

3. 如果x1!=x2且y1!=y2,渐变色方向则为对角。

AddColorStop 函数包含两个参数。

1. 0到1 之间的数字,用来表示渐变色起始和终点的位置。

2. Color;

Lab1.3.2 使用圆形渐变

代码：

var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85);

grd.addColorStop(0, <span class="str" style="color: rgb(0, 96, 128);">"orange"</span>);

grd.addColorStop(0.2, <span class="str" style="color: rgb(0, 96, 128);">"magenta"</span>);

grd.addColorStop(0.4, <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>);

grd.addColorStop(0.6, <span class="str" style="color: rgb(0, 96, 128);">"green"</span>);

grd.addColorStop(0.8, <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>);

grd.addColorStop(1, <span class="str" style="color: rgb(0, 96, 128);">"red"</span>);

ctx.fillStyle = grd

ctx.fillRect(75, 75, 150, 150);

输出

CreateRadialGradiant包含6个参数，x1,y1,r1,x2,y2,r2

1, x1,y1,r1代表开始圆形的圆心和半径

2. x2,y2,r2 表示结束圆的圆心和半径

Lab 1.4 使用圆形

核心代码：

ctx.beginPath();

ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;

ctx.strokeStyle=<span class="str" style="color: rgb(0, 96, 128);">"green"</span>;

ctx.lineWidth = <span class="str" style="color: rgb(0, 96, 128);">"8"</span>;

ctx.arc(100, 175, 85, 0, 2*Math.PI);

ctx.fill();

ctx.stroke();


ctx.beginPath();

ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"green"</span>;

ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;

ctx.lineWidth = <span class="str" style="color: rgb(0, 96, 128);">"8"</span>;

ctx.arc(285, 175, 85, 0, 1 * Math.PI);

ctx.fill();

ctx.stroke();

输出：

DrawArc 函数包含5个参数，x,y,r,sa,ea

x 和y 表示圆心

r表示半径

sa 和ea 是开始边缘和结束边缘

Lab1.5 使用Text

代码：

ctx.beginPath();

ctx.font = "30px Segoe UI";

ctx.fillText("www.StepByStepSchools.Net",0, 150);

输出：

fillText/stokeText具有三个参数

1. 实际输出的文本

2. x,y 是可选值。

Lab 1.6 Scale

ctx.strokeRect(75, 75, 75, 75);

ctx.scale(2,2);

ctx.strokeRect(75, 75, 75, 75);

输出：

Lab 1.7 旋转

代码片段：

ctx.rotate(0.2);

ctx.strokeRect(75, 75, 75, 75);

输出：

Lab 1.8 转换

代码：

ctx.strokeRect(0, 0, 150, 150);

ctx.translate(150, 150);

ctx.strokeRect(0, 0, 150, 150);

输出：

Lab 1.9 保存和重置Canvas 的状态

ctx.fillStyle=<span class="str" style="color: rgb(0, 96, 128);">"red"</span>;

ctx.fillRect(75, 75, 150, 150);


ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"blue"</span>;             

ctx.fillRect(90, 90, 50, 50);


ctx.save();


ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;

ctx.fillRect(90, 160, 50, 50);


ctx.save();

ctx.fillStyle = <span class="str" style="color: rgb(0, 96, 128);">"green"</span>;

ctx.restore();

ctx.restore();

ctx.fillRect(160, 160, 50, 50);

输出

Lab 1.10 使用图像

vari = <span class="kwrd" style="color: rgb(0, 0, 255);">new</span> Image();
i.src = <span class="str" style="color: rgb(0, 96, 128);">"Desert.jpg"</span>;
i.onload = function () {
    <span class="rem" style="color: rgb(0, 128, 0);">//Draw Squqre</span>
ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"green"</span>;
ctx.lineWidth = 5;
ctx.drawImage(i, 0, 0);
ctx.strokeRect(60, 120, 70, 80);

    <span class="rem" style="color: rgb(0, 128, 0);">//draw Text</span>
ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"yellow"</span>;
ctx.font = <span class="str" style="color: rgb(0, 96, 128);">"30px Segoe UI"</span>;
ctx.lineWidth = 1;
ctx.strokeText(<span class="str" style="color: rgb(0, 96, 128);">"My Home"</span>, 80, 40);

    <span class="rem" style="color: rgb(0, 128, 0);">//Draw Arrow</span>
ctx.beginPath();
ctx.strokeStyle = <span class="str" style="color: rgb(0, 96, 128);">"red"</span>;
ctx.lineWidth = 2;
ctx.moveTo(110, 110);
ctx.lineTo(125, 40);

ctx.moveTo(110, 110);
ctx.lineTo(100, 90);

ctx.moveTo(110, 110);
ctx.lineTo(126, 95);
ctx.stroke();
};

输出：

Lab1.11 使用Canvas 生成动画

一旦在Canvas 填充好东西就无法修改，可采用以下方法来修改：

1. 使用ClearRect 函数删除存在的元素

2. 添加新属性重画元素

当以上策略与传统的JS 函数结合，可使用TimeOut 或SetInterval 方法来实现，可产生动画。

代码：

var interval;
var x = 0, y = 0;
functiondrawInAnimation()
{
varctx = document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).getContext(<span class="str" style="color: rgb(0, 96, 128);">"2d"</span>);

ctx.beginPath();
ctx.moveTo(x, y);
ctx.clearRect(x , y, 50, 50);
<span class="kwrd" style="color: rgb(0, 0, 255);">if</span> (x >document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).width) {

        x = 0;
        y += 50;
<span class="kwrd" style="color: rgb(0, 0, 255);">if</span> (y + 50 >document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">'MyCanvas'</span>).height)
        {
            x = 0; y = 0;
        } 
    }
<span class="kwrd" style="color: rgb(0, 0, 255);">else</span> {
        x += 15;
    }
ctx.fillStyle = getRndColor();
ctx.fillRect(x, y,50,50);
}
functiongetRndColor() {
var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0;
    <span class="kwrd" style="color: rgb(0, 0, 255);">return</span> <span class="str" style="color: rgb(0, 96, 128);">'rgb('</span> + r + <span class="str" style="color: rgb(0, 96, 128);">','</span> + g + <span class="str" style="color: rgb(0, 96, 128);">','</span> + b + <span class="str" style="color: rgb(0, 96, 128);">')'</span>;
}

interval = setInterval(<span class="str" style="color: rgb(0, 96, 128);">"drawInAnimation()"</span>, 15);

输出：

Lab 2 使用SVG 工作

如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。

初始化

1. 新建HTML页面

<html>

<head></head>

<body></body>

</html>

2. 在body 标签内新建Canvas :

<SVG id=<span class="str" style="color: rgb(0, 96, 128);">"MySVG"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"500px"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"border:1px solid black;"</span>>

</SVG >

Lab2.1 画出多种形状

代码：

<svg width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"200"</span>>


    <!--surrounding border-->

    <rect x=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"200"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: rgb(199, 240, 185);"</span>> </rect>

    <!--surrounding border-->



    <!--Hat Start-->

    <rect x=<span class="str" style="color: rgb(0, 96, 128);">"78"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"10"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"44"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: black; stroke: black; "</span>></rect>

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"67"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"12"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"white"</span>

                stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"0.5"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"black"</span>></ellipse>          

    <!--Hat End-->



    <!--Left ear-->

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"55"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"black"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"gray"</span>></ellipse>


    <!--Right ear-->

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"145"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"black"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"gray"</span>></ellipse>


    <!--Face-->

    <circle cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"105"</span> r=<span class="str" style="color: rgb(0, 96, 128);">"50"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"black"</span> stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"rgb(230, 231, 194)"</span> />


    <!--Left Eye-->

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"10"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span>

                style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> />

    <!--Left Eye ball-->

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"80"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"12"</span>

                style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span> />


    <!--Right Eye-->

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"10"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span>

                style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> />

    <!--Right Eye ball-->

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"120"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"12"</span>

                style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span> />


    <!--Mouth start-->

    <clipPath id=<span class="str" style="color: rgb(0, 96, 128);">"cut-off-bottom"</span>>

        <rect x=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> />

    </clipPath>

    <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> clip-path=<span class="str" style="color: rgb(0, 96, 128);">"url(#cut-off-bottom)"</span>

                style=<span class="str" style="color: rgb(0, 96, 128);">"fill:rgb(230, 231, 194);stroke:black;stroke-width:2"</span> />

    <!--Mouth End-->


    <!--Nose-->

    <polygon points=<span class="str" style="color: rgb(0, 96, 128);">"100,115 85,125 115,125"</span>

                style=<span class="str" style="color: rgb(0, 96, 128);">"fill: brown;

            stroke-width: 1"</span> />


    <!--Divider-->

    <line x1=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y1=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> x2=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> y2=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"stroke:brown;

stroke-width:2"</span> />

    <text x=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"185"</span> font-family=<span class="str" style="color: rgb(0, 96, 128);">"Comic Sans MS'"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"Blue"</span> >A coder can be creative</text>

</svg>

输出：

Lab 2.2SVG 动画

SVG 使得动画制作变得简单：

初始化设置：

<svg width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"220"</span>>

        <rect x=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"220"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill: rgb(199, 240, 185);"</span>>
        </rect>

....
</svg>

眨眼动画：

<!--Left Eye-->

        <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"15"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"15"</span>

                    style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> />

        <!--Left Eye ball-->

        <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"5"</span>

                    style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span>>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                        from=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"85"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left1"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"1"</span>

                        begin=<span class="str" style="color: rgb(0, 96, 128);">"0s;Left5.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    to=<span class="str" style="color: rgb(0, 96, 128);">"85"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"Left1.end"</span> />


            <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span>

                                type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left2"</span>

                                from=<span class="str" style="color: rgb(0, 96, 128);">"0 75 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"360 75 95"</span>

                                begin=<span class="str" style="color: rgb(0, 96, 128);">"Left1.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span>

                                repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>>

            </animateTransform>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                        from=<span class="str" style="color: rgb(0, 96, 128);">"85"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"65"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left3"</span>

                        begin=<span class="str" style="color: rgb(0, 96, 128);">"Left2.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    to=<span class="str" style="color: rgb(0, 96, 128);">"65"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"Left3.end"</span> />


            <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span>

                                type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left4"</span>

                                from=<span class="str" style="color: rgb(0, 96, 128);">"360 75 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0 75 95"</span>

                                begin=<span class="str" style="color: rgb(0, 96, 128);">"Left3.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span>

                                repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>>

            </animateTransform>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                        from=<span class="str" style="color: rgb(0, 96, 128);">"65"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"75"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Left5"</span>

                        begin=<span class="str" style="color: rgb(0, 96, 128);">"Left4.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    to=<span class="str" style="color: rgb(0, 96, 128);">"75"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"Left4.end"</span> >

            </set>

        </ellipse>

<!--Right Eye-->

        <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"15"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"15"</span>

                    style=<span class="str" style="color: rgb(0, 96, 128);">"fill:white;stroke:black;stroke-width:1"</span> />

        <!--Right Eye ball-->

        <ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"95"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"5"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"fill:black;stroke:black;stroke-width:1"</span>>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                        from=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right1"</span> repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"1"</span>

                        begin=<span class="str" style="color: rgb(0, 96, 128);">"0s;Right5.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right1.end"</span> />


            <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span>

                                type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right2"</span>

                                from=<span class="str" style="color: rgb(0, 96, 128);">"0 125 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"360 125 95"</span>

                                begin=<span class="str" style="color: rgb(0, 96, 128);">"Right1.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span>

                                repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>>

            </animateTransform>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                        from=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"115"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right3"</span>

                        begin=<span class="str" style="color: rgb(0, 96, 128);">"Right2.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    to=<span class="str" style="color: rgb(0, 96, 128);">"115"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"Right3.end"</span> />


            <animateTransform attributeName=<span class="str" style="color: rgb(0, 96, 128);">"transform"</span>

                                type=<span class="str" style="color: rgb(0, 96, 128);">"rotate"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right4"</span>

                                from=<span class="str" style="color: rgb(0, 96, 128);">"360 125 95"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0 125 95"</span>

                                begin=<span class="str" style="color: rgb(0, 96, 128);">"Right3.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span>

                                repeatCount=<span class="str" style="color: rgb(0, 96, 128);">"3"</span>>

            </animateTransform>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                        from=<span class="str" style="color: rgb(0, 96, 128);">"115"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"Right5"</span>

                        begin=<span class="str" style="color: rgb(0, 96, 128);">"Right4.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"0.5s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> begin=<span class="str" style="color: rgb(0, 96, 128);">"Right4.end"</span> />

        </ellipse>

张嘴动画：

<clipPath id=<span class="str" style="color: rgb(0, 96, 128);">"cut-off-bottom"</span>>

    <rect x=<span class="str" style="color: rgb(0, 96, 128);">"70"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"11"</span>>


        <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    from=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation1"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthClipAnimation3.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

        <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    from=<span class="str" style="color: rgb(0, 96, 128);">"11"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"22"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation2"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthClipAnimation4.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />


        <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation1.end-0.1"</span> />

        <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                to=<span class="str" style="color: rgb(0, 96, 128);">"22"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation2.end-0.1"</span> />


        <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    from=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation3"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation1.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

        <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                    from=<span class="str" style="color: rgb(0, 96, 128);">"22"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"11"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation4"</span>

                    begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation2.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />


        <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation3.end-0.1"</span> />

        <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                to=<span class="str" style="color: rgb(0, 96, 128);">"11"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthClipAnimation4.end-0.1"</span> />

    </rect>

</clipPath>

<ellipse cx=<span class="str" style="color: rgb(0, 96, 128);">"100"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> rx=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> ry=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> clip-path=<span class="str" style="color: rgb(0, 96, 128);">"url(#cut-off-bottom)"</span>

            style=<span class="str" style="color: rgb(0, 96, 128);">"fill:rgb(230, 231, 194);stroke:black;stroke-width:2"</span>>


    <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                from=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation1"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthEllipseAnimation4.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

    <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                from=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation2"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthEllipseAnimation5.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

    <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                from=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation3"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"0;MouthEllipseAnimation6.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

    <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

            to=<span class="str" style="color: rgb(0, 96, 128);">"135"</span>

            begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation1.end-0.1"</span> />

    <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

            to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span>

            begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation2.end-0.1"</span> />

    <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

            to=<span class="str" style="color: rgb(0, 96, 128);">"8"</span>

            begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation3.end-0.1"</span> />


    <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                from=<span class="str" style="color: rgb(0, 96, 128);">"135"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation4"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation1.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

    <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                from=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"30"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation5"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation2.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

    <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                from=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"20"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation6"</span>

                begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation3.end+3"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

    <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"cy"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

            to=<span class="str" style="color: rgb(0, 96, 128);">"125"</span>

            begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation4.end-0.1"</span> />

    <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"rx"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

            to=<span class="str" style="color: rgb(0, 96, 128);">"30"</span>

            begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation5.end-0.1"</span> />

    <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"ry"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

            to=<span class="str" style="color: rgb(0, 96, 128);">"20"</span>

            begin=<span class="str" style="color: rgb(0, 96, 128);">"MouthEllipseAnimation6.end-0.1"</span> />

</ellipse>

盒子动画效果：

<!--Box Anmation-->

        <rect x=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> width=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"14"</span>

              stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"2"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"brown"</span>>

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                     from=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"210"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight"</span>

                     begin=<span class="str" style="color: rgb(0, 96, 128);">"0;bottomToTop.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight.end-0.2"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"x"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"191"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight.end-0.2"</span> />


            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                     from=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"55"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom"</span>

                     begin=<span class="str" style="color: rgb(0, 96, 128);">"leftToRight.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end-0.2"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"206"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end-0.2"</span> />


            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                     from=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"210"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft"</span>

                     begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"x"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                     from=<span class="str" style="color: rgb(0, 96, 128);">"206"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft"</span>

                     begin=<span class="str" style="color: rgb(0, 96, 128);">"topToBottom.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"width"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end-0.2"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"x"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"0"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end-0.2"</span> />


            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                     from=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"55"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop"</span>

                     begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

            <animate attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                     from=<span class="str" style="color: rgb(0, 96, 128);">"206"</span> to=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> id=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop"</span>

                     begin=<span class="str" style="color: rgb(0, 96, 128);">"rightToLeft.end"</span> dur=<span class="str" style="color: rgb(0, 96, 128);">"1s"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"height"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"14"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop.end-0.2"</span> />

            <set attributeName=<span class="str" style="color: rgb(0, 96, 128);">"y"</span> attributeType=<span class="str" style="color: rgb(0, 96, 128);">"XML"</span>

                 to=<span class="str" style="color: rgb(0, 96, 128);">"165"</span>

                 begin=<span class="str" style="color: rgb(0, 96, 128);">"bottomToTop.end-0.2"</span> />

        </rect>


        <line x1=<span class="str" style="color: rgb(0, 96, 128);">"0"</span> y1=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> x2=<span class="str" style="color: rgb(0, 96, 128);">"205"</span> y2=<span class="str" style="color: rgb(0, 96, 128);">"165"</span> style=<span class="str" style="color: rgb(0, 96, 128);">"stroke:brown;

stroke-width:2"</span> />

        <text x=<span class="str" style="color: rgb(0, 96, 128);">"14"</span> y=<span class="str" style="color: rgb(0, 96, 128);">"200"</span> font-family=<span class="str" style="color: rgb(0, 96, 128);">"Comic Sans MS'"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"Blue"</span>>A coder can be creative</text>

输出

SVG VS Canvas

SVG 和Canvas 区别：

Vector VS Pixel

Canvas 是基于Pixel 而SVG 是基于Vector

简单来说SVG图片是与屏幕分辨率无关的，而Canvas 不是。

XML VS JavaScript

SVG使用语义标记可绘出图形，然而Canvas就只能使用JS脚本代码。

支持事件处理

Canvas 不支持事件处理，SVG 支持。

HTML

  <svg width=<span class="str" style="color: rgb(0, 96, 128);">"120"</span> height=<span class="str" style="color: rgb(0, 96, 128);">"120"</span>>

        <circle cx=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> cy=<span class="str" style="color: rgb(0, 96, 128);">"60"</span> r=<span class="str" style="color: rgb(0, 96, 128);">"25"</span> stroke=<span class="str" style="color: rgb(0, 96, 128);">"green"</span>  id=<span class="str" style="color: rgb(0, 96, 128);">"MyCircle"</span>

            stroke-width=<span class="str" style="color: rgb(0, 96, 128);">"8"</span> fill=<span class="str" style="color: rgb(0, 96, 128);">"yellow"</span> onmouseover=<span class="str" style="color: rgb(0, 96, 128);">"IncreaseSize();"</span> onmouseout=<span class="str" style="color: rgb(0, 96, 128);">"DecreaseSize();"</span> />

    </svg>

<input type=<span class="str" style="color: rgb(0, 96, 128);">"button"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">value</span>=<span class="str" style="color: rgb(0, 96, 128);">"+"</span> onclick=<span class="str" style="color: rgb(0, 96, 128);">"ChangeSize();"</span>>

JavaScript

<script type=<span class="str" style="color: rgb(0, 96, 128);">"text/javascript"</span>>

    function IncreaseSize ()

    {

                    document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">"MyCircle"</span>).r.baseVal.<span class="kwrd" style="color: rgb(0, 0, 255);">value</span>=50;

    }

    function DecreaseSize()

    {

        document.getElementById(<span class="str" style="color: rgb(0, 96, 128);">"MyCircle"</span>).r.baseVal.<span class="kwrd" style="color: rgb(0, 0, 255);">value</span> = 25;

    }

</script>

输出

```
支持图片保存
```

Canvas 最后可输出为图像，可使用浏览器默认的选项将图像保存。而SVG 不支持。