SVG应用

在某些场景下， svg比canvas简单些, 比gif图片小很多（意味着加载快）

svg的path是一些指令完成的， 只需要指定起止坐标点

<path d="M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z" fill="blue"/>

动画可以沿着path的路径进行，path可以使用一些画图工具生成比如PS, 如果用css3描述这个动画,代码量非常庞大

svg中嵌套png,jpg图片

width, height是必须的

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"  style="xxxxx"/>
</svg>

使用CSS style

有些属性名和标准CSS不同，因为它是svg规范，不是css规范。
比如：语法和在html里使用CSS一样，只不过你要把background-color、border改成fill和stroke

CSS里的hover，id等都能使用， 只有部分不支持，比如:before :after

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

#MyRect:hover {
   stroke: black;
   fill: blue;
 }

支持click事件

动画支持暂停