JavaScript是一種廣泛運用于web應用開發中的腳本語言，它提供了一種簡單而靈活的方式來操作DOM和SVG元素。在本文中，我將介紹如何使用JavaScript來修改SVG圖片。
SVG是一種使用XML語言描述的矢量圖形格式，它能夠以任意比例縮放而不失真。在SVG圖片中，我們可以使用一系列的路徑、線條、矩形、圓形等基本元素來組合出復雜的圖形。而JavaScript可以通過DOM來獲取SVG元素并修改其屬性，實現我們需要的功能。
舉個例子，假設我們有一個簡單的SVG圖片，其中包含一個矩形元素：

<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" />
</svg>

現在我們想要通過JavaScript將矩形的寬度改為60，高度改為40，可以使用以下代碼：

javascript
var svg = document.querySelector('svg');
var rect = svg.querySelector('rect');
rect.setAttribute('width', 60);
rect.setAttribute('height', 40);

此時，SVG圖片中的矩形元素寬度和高度就已經被修改了。
除了修改屬性外，JavaScript還可以插入、刪除或移動SVG元素。例如，我們可以添加一個新的圓形元素，并將其插入到SVG圖片的最前面：

javascript
var svg = document.querySelector('svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);
circle.setAttribute('r', 30);
circle.setAttribute('fill', 'red');
svg.insertBefore(circle, svg.firstChild);

這樣，SVG圖片中就會多出一個紅色的圓形了。
在移動SVG元素方面，我們可以使用CSS屬性transform來改變元素的位置、旋轉、縮放等參數。例如，我們可以對矩形元素進行平移和旋轉：

javascript
var rect = document.querySelector('rect');
rect.setAttribute('transform', 'translate(20, 20), rotate(45)');

這樣，SVG圖片中的矩形元素就會向右下平移20個像素并旋轉45度。
總之，JavaScript是一種強大的工具，它可以幫助我們更方便、更靈活地操作SVG圖片。無論是修改屬性、插入、刪除元素還是移動元素，都可以通過JavaScript輕松實現。