python处理svg 平移 旋转_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文件中可能會引入<?xml version="1.0" encoding="utf-8"?>這樣的內容，這時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