JavaScript做svg
隨著技術(shù)的不斷提高，SVG正在成為越來越流行的圖形格式，它不僅可以縮放到任意大小而沒有失真，而且可以與其他DOM元素進行互動。與傳統(tǒng)的位圖圖像不同，SVG使用形狀、線條和漸變等元素來定義圖形。JavaScript可以與SVG一起使用，讓你可以動態(tài)地創(chuàng)建、修改或者互動SVG元素。下面我們來看一些例子。
首先，我們可以在SVG中繪制一個矩形，使用JavaScript來設(shè)置它的高度和寬度。代碼如下所示：

<svg width="200" height="200">
<rect x="10" y="10" width="50" height="50" id="myRect" />
</svg>
<script>
var rect = document.getElementById("myRect");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
</script>

在這個例子中，我們定義了一個200x200像素大小的SVG元素，并在其中繪制了一個寬為50、高為50的矩形。然后使用JavaScript來修改這個矩形的大小，將它的寬度設(shè)置為100并將高度設(shè)置為100。
接著，我們可以使用JavaScript來創(chuàng)建新的SVG元素，并將它添加到文檔中。代碼如下所示：

<svg width="200" height="200" id="mySvg">
<circle cx="50" cy="50" r="30" fill="blue" />
</svg>
<script>
var svg = document.getElementById("mySvg");
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "80");
rect.setAttribute("y", "80");
rect.setAttribute("width", "50");
rect.setAttribute("height", "50");
rect.setAttribute("fill", "red");
svg.appendChild(rect);
</script>

在這個例子中，我們首先定義了一個200x200像素大小的SVG元素，并在其中繪制了一個藍色的圓。然后使用JavaScript創(chuàng)建一個新的矩形元素，并使用setAttribute方法設(shè)置它的屬性。最后將它添加到SVG元素中。
最后，我們可以使用JavaScript來實現(xiàn)SVG元素上的互動。例如，我們可以點擊一個元素時改變它的顏色。代碼如下所示：

<svg width="200" height="200">
<rect x="10" y="10" width="50" height="50" id="myRect" fill="red" />
</svg>
<script>
var rect = document.getElementById("myRect");
rect.addEventListener("click", function() {
rect.setAttribute("fill", "blue");
});
</script>

在這個例子中，我們定義了一個寬為50、高為50的紅色矩形。然后使用JavaScript監(jiān)聽它的click事件，并在點擊時將其顏色改為藍色。
總結(jié)
通過JavaScript，我們可以使用SVG創(chuàng)建、修改和互動元素。我們可以使用setAttribute方法來設(shè)置元素的屬性，使用createElementNS方法創(chuàng)建新的元素，并使用addEventListener方法來監(jiān)聽事件。這些操作僅僅是JavaScript的冰山一角，我們可以通過不斷探索，用JavaScript為我們的SVG圖形帶來更多的驚喜！