盒子动画效果：

<!--Box Anmation--> <rect x="0" y="165" width="14" height="14" stroke-width="2" fill="brown"> <animate attributeName="width" attributeType="XML" from="0" to="210" id="leftToRight" begin="0;bottomToTop.end" dur="1s" /> <set attributeName="width" attributeType="XML" to="14" begin="leftToRight.end-0.2" /> <set attributeName="x" attributeType="XML" to="191" begin="leftToRight.end-0.2" /> <animate attributeName="height" attributeType="XML" from="14" to="55" id="topToBottom" begin="leftToRight.end" dur="1s" /> <set attributeName="height" attributeType="XML" to="14" begin="topToBottom.end-0.2" /> <set attributeName="y" attributeType="XML" to="206" begin="topToBottom.end-0.2" /> <animate attributeName="width" attributeType="XML" from="0" to="210" id="rightToLeft" begin="topToBottom.end" dur="1s" /> <animate attributeName="x" attributeType="XML" from="206" to="0" id="rightToLeft" begin="topToBottom.end" dur="1s" /> <set attributeName="width" attributeType="XML" to="14" begin="rightToLeft.end-0.2" /> <set attributeName="x" attributeType="XML" to="0" begin="rightToLeft.end-0.2" /> <animate attributeName="height" attributeType="XML" from="14" to="55" id="bottomToTop" begin="rightToLeft.end" dur="1s" /> <animate attributeName="y" attributeType="XML" from="206" to="165" id="bottomToTop" begin="rightToLeft.end" dur="1s" /> <set attributeName="height" attributeType="XML" to="14" begin="bottomToTop.end-0.2" /> <set attributeName="y" attributeType="XML" to="165" begin="bottomToTop.end-0.2" /> </rect> <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown; stroke-width:2" /> <text x="14" y="200" font-family="Comic Sans MS'" fill="Blue">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 支持。