Javascript 控制SVG 是我們平時經常用到的技巧，這是因為SVG的靈活性和可塑性非常高，而JavaScript正是掌控這個靈活性的關鍵。下面，就來看一些常見的Javascript控制SVG的例子。

首先，我們可以使用Javascript控制SVG圖形的位置。這個過程很簡單，可以通過SVG DOM中的屬性，如cx、cy、x、y、transform和viewBox等來實現。以下代碼可以將圓形進行平移:

// 獲取SVG元素
var circle = document.getElementById("myCircle");
// 設置新位置
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");

在上面的例子中，我們獲取了一個圓形元素，并將其移動到了50，50這個位置。

其次，我們可以使用Javascript控制SVG的形狀和大小。我們可以使用同樣的屬性，如width、height、rx、ry等來控制SVG元素的寬度和高度以及圓角等屬性。以下代碼將一個矩形的寬度和高度加倍:

// 獲取SVG元素
var rect = document.getElementById("myRect");
// 設置新的寬高
rect.setAttribute("width", "200");
rect.setAttribute("height", "200");

在上面的例子中，我們獲取了一個矩形元素，并將其寬度和高度都加倍了。

此外，我們也可以使用JavaScript控制SVG元素的樣式和顏色。同樣，我們可以使用SVG DOM中的屬性來控制樣式和顏色，如fill、stroke、stroke-width等。以下代碼將一個矩形的填充顏色設置為橙色:

// 獲取SVG元素
var rect = document.getElementById("myRect");
// 設置填充顏色
rect.setAttribute("fill", "orange");

在上面的例子中，我們獲取了一個矩形元素，并將其填充顏色設置為了橙色。

最后，我們也可以使用JavaScript控制SVG元素的動畫效果。我們可以使用SVG DOM中的方法，如animate()和animateTransform()來添加動畫效果。以下代碼將一個矩形元素進行左右移動:

// 獲取SVG元素
var rect = document.getElementById("myRect");
// 創建動畫
var anim = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
// 設置動畫屬性
anim.setAttribute("attributeType", "xml");
anim.setAttribute("attributeName", "transform");
anim.setAttribute("type", "translate");
anim.setAttribute("from", "0");
anim.setAttribute("to", "200");
anim.setAttribute("dur", "1s");
anim.setAttribute("repeatCount", "indefinite");
// 添加動畫到SVG元素中
rect.appendChild(anim);

在上面的例子中，我們獲取了一個矩形元素，并創建了一個動畫。其中，動畫屬性包括了動畫類型、起始位置、結束位置、動畫時間等，最后將動畫添加到SVG元素中。

總之，以上是一些常見的JavaScript控制SVG的技巧和方法。通過Javascript，我們可以自由掌控SVG元素的位置、大小、樣式、顏色以及動畫效果。學習和掌握這些JS技巧，我們將可以高效地進行SVG開發，打造出美觀、生動的SVG圖像。