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 檢視區的左上方。這最後將會變成沿著所有「附加」的圖形物件移動與檢視區相對的使用者座標系統原點。例如：<svg width="300px" height="200px" viewBox="0 0 300 200">在此例中，水平方向每 300 個使用者單位會有 300 像素，而垂直方向每 200 個使用者單位就會有 200 像素。換句話說，每個使用者單位等於一個像素。<svg width="300px" height="200px" viewBox="0 0 600 400">然而，在下列範例中，水平方向每 600 個使用者單位會有 300 像素 (或是每個使用者單位 0.5 像素)，而垂直方向每 400 個使用者單位就會有 200 像素 (或是每個使用者單位 0.5 像素)。請注意，這項變更會造成所有的圖形物件大小減半。 JS操作svg:1、擷取子項目：firstChild, firstElementChild,這是由於svg檔案中可能會引入<?xml version="1.0" encoding="utf-8"?>這樣的內容，這時firstChild就會表示這些非HTMLElement元素，包括空格、斷行符號。2、設定屬性：setAttribute('name','value');3、設定text標籤的值：textSvg.firstChild.data ='40',或者使用textContent,其中有一個屬性wholeText,但不可用,或者直接textSvg.textContent = '40';例子一：建立一個circlegearCircleElement = 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