svg平移、放大、缩小及js操作svg

 在svg图形中，很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。

width:宽度，这个宽度是指在页面中实际使用的大小，跟div中定义width是同样的含义。

height：高度，含义同上。

viewBox:视图框，是一个由字符串表示的，格式："0 0 2050 1000",--->(ULCx ULCy UUwidth UUheight)

ULCx 与 ULCy 分別代表「左上角 x」与「左上角 y」。UUwidth 与UUheight 分別代表「使用者单位宽度」与「使用者单位高度」

一般而言，会在使用者空间内，将 SVG 图形物件绘製到相对於使用者空间 (也就是使用者座标系统) 的位置。以相对静态的图形来缩放和移动瀏览时，SVG 图形物件通常绝不会在使用者座标系统中移动；而是使用者座标系统本身会在 (相对於) SVG 检视区中移动 (延著所有其附加的图形)。因此从检视区的观点来看，图形物件已经移动。也就是说，您通常是移动或转换附加图形物件的使用者座标系统，而非图形物件本身。