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 检视区中移动 (延著所有其附加的图形)。因此从检视区的观点来看，图形物件已经移动。也就是说，您通常是移动或转换附加图形物件的使用者座标系统，而非图形物件本身。

基於上述说明，ULCx、ULCy、UUwidth 与 UUheight 这四个数字的解释如下：
ULCx 与 ULCy - 会移动使用者座标系统 (会在裡面绘製图形物件) 的原点，这样该点 (ULCx, ULCy) 就会出现在定义的 SVG 检视区的左上角。也就是，将在检视区中移动使用者座标系统视觉化，这样使用者座标点 (ULCx、 ULCy) 就会发生在 SVG 检视区的左上角。这最后将会变成沿著所有「附加」的图形物件移动与检视区相对的使用者座标系统原点。
例如：

在此例中，水平方向每 300 个使用者单位会有 300 像素，而垂直方向每 200 个使用者单位就会有 200 像素。换句话说，每个使用者单位等於一个像素。

然而，在下列范例中，水平方向每 600 个使用者单位会有 300 像素 (或是每个使用者单位 0.5 像素)，而垂直方向每 400 个使用者单位就会有 200 像素 (或是每个使用者单位 0.5 像素)。请注意，这项变更会造成所有的图形物件大小减半。

JS操作svg:

1、获取子元素：firstChild, firstElementChild,这是由于svg文件中可能会引入这样的内容，这时firstChild就会表示这些非HTMLElement元素，包括空格、回车。

2、设置属性：setAttribute('name','value');

3、设置text标签的值：textSvg.firstChild.data ='40',或者使用textContent,其中有一个属性wholeText,但不可用,或者直接textSvg.textContent = '40';

例子一：创建一个circle

     gearCircleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      gearCircleElement.id = ‘circle’;
      gearCircleElement.cx.baseVal.value = 34;
      gearCircleElement.cy.baseVal.value = 43;      
      gearCircleElement.r.baseVal.value = 12;      
      gearCircleElement.style.fill = '#f00';

例子二：创建文本

gearTextElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
      gearTextElement.id = ‘text’;
      gearTextElement.setAttribute("x", 67);
      gearTextElement.setAttribute("y", 34);
      gearTextElement.setAttribute("transform", "translate(3, -3)"); // Offset the text from the center of the circle.
      gearTextElement.textContent = "##" ;
      gearTextElement.setAttribute("font-size", 10);

例子三：创建直线

gearLineElement = document.createElementNS("http://www.w3.org/2000/svg", "line");      
      gearLineElement.id = "line";
      gearLineElement.x1.baseVal.value = 3;
      gearLineElement.y1.baseVal.value = 56;
      gearLineElement.x2.baseVal.value = 12;
      gearLineElement.y2.baseVal.value = 43;
      gearLineElement.style.stroke = "white";

lie

j

jsc