创建 SVG 元素 JavaScript

SVG（Scalable Vector Graphics）是一种基于XML语法的标记语言，用于描述2D图形的渲染。在Web应用程序中，SVG经常被用于创建动态和交互式图表、图像和图形。在这篇文章中，我们将学习如何使用JavaScript动态创建SVG元素。

创建SVG元素

我们可以使用JavaScript的DOM API来创建SVG元素和属性。在创建SVG元素之前，我们需要先创建一个SVG命名空间。

const svgNS = 'http://www.w3.org/2000/svg';

使用上述命名空间，我们可以在JavaScript中创建SVG元素。

const svgElem = document.createElementNS(svgNS, 'svg');

在上面的代码中，我们使用了createElementNS方法来创建一个新的SVG元素。

接下来，我们可以给SVG元素添加一些属性，例如宽度、高度、颜色等。

svgElem.setAttribute('width', 800);
svgElem.setAttribute('height', 600);
svgElem.style.backgroundColor = 'white';

我们还可以给SVG元素添加一个视口，用于放置所有的SVG元素。为此，我们需要创建一个g（group）元素，并将其添加到SVG元素中。

const groupElem = document.createElementNS(svgNS, 'g');
svgElem.appendChild(groupElem);

创建SVG图形

接下来，我们将学习如何创建SVG图形，例如矩形、圆形、文本和路径。

矩形

我们可以使用rect元素来创建一个矩形。

const rectElem = document.createElementNS(svgNS, 'rect');
rectElem.setAttribute('x', 50);
rectElem.setAttribute('y', 50);
rectElem.setAttribute('width', 100);
rectElem.setAttribute('height', 50);
rectElem.setAttribute('fill', 'blue');
groupElem.appendChild(rectElem);

在上面的代码中，我们创建了一个具有50像素左偏移和50像素顶部偏移的蓝色填充矩形。

圆形

我们可以使用circle元素来创建一个圆形。

const circleElem = document.createElementNS(svgNS, 'circle');
circleElem.setAttribute('cx', 150);
circleElem.setAttribute('cy', 75);
circleElem.setAttribute('r', 30);
circleElem.setAttribute('fill', 'red');
groupElem.appendChild(circleElem);

在上面的代码中，我们创建了一个具有150像素左偏移和75像素顶部偏移的红色填充圆形。

文本

我们可以使用text元素来创建一个文本。

const textElem = document.createElementNS(svgNS, 'text');
textElem.setAttribute('x', 50);
textElem.setAttribute('y', 150);
textElem.textContent = 'Hello World!';
groupElem.appendChild(textElem);

在上面的代码中，我们创建了一个具有50像素左偏移和150像素顶部偏移的文本。

路径

我们可以使用path元素来创建一个路径。

const pathElem = document.createElementNS(svgNS, 'path');
pathElem.setAttribute('d', 'M 50 200 L 200 200 L 125 300 Z');
pathElem.setAttribute('fill', 'none');
pathElem.setAttribute('stroke', 'black');
groupElem.appendChild(pathElem);

在上面的代码中，我们创建了一个具有三个坐标的路径，并使用黑色轮廓绘制它。

总结

使用JavaScript创建SVG元素可以让我们动态地创建和操作SVG图形。在这篇文章中，我们学习了如何创建SVG元素和几种基本的SVG图形，包括矩形、圆形、文本和路径。现在，你可以开始在你的Web应用程序中使用SVG图形。