小张与SVG

什么是SVG

SVG是指可伸缩矢量图形，用于定义网络的基于矢量的图形，使用XML定义图形，在放大或者改变尺寸不会有质量损失。

SVG与Canvas的区别

• SVG是基于XML描述2D图形，而Canvas是通过js绘制2D图形
• SVG基于XML，意味着SVG DOM中每个元素都是可用的，可以为某个元素附加JS事件处理器。在SVG中，每个绘制的图形都被视为对象，如果SVG对象的属性发生变化，浏览器会自动重现图形。
• Canvas是逐像素进行渲染的，一旦绘制完成，浏览器不会再关注，如果位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的app
能以.png或者.jpg保存图像	复杂度高会减慢渲染速度（因为过度使用DOM）
最适合图像密集型	不适合游戏应用

SVG绘制

//绘制矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
//透明度opacity
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
//圆角矩形 rx ry
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>


//圆形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

//直线
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>