从 JavaScript 生成 SVG

SVG（Scalable Vector Graphics）是一种基于 XML 的图像格式，它可以用来创建高保真度的、可缩放的矢量图形。JavaScript 是一种广泛使用的脚本语言，它可以用来生成 SVG 图像以及对其进行交互式操作。

本文将介绍如何使用 JavaScript 来生成 SVG 图像，以及一些常用的 SVG 元素和属性。

生成 SVG 容器

首先，我们需要创建一个 SVG 容器元素，用来承载我们生成的图形。在 HTML 中，可以使用 <svg> 标签来创建 SVG 容器：

<svg width="400" height="400"></svg>

在 JavaScript 中，可以使用 document.createElement() 方法来创建一个 <svg> 元素：

const svgElement = document.createElement('svg');
svgElement.setAttribute('width', '400');
svgElement.setAttribute('height', '400');
document.body.appendChild(svgElement);

以上代码会在页面中创建一个宽度为 400px，高度为 400px 的 SVG 容器。

添加 SVG 元素

一旦有了 SVG 容器，我们就可以向其中添加各种图形和对象了。常见的 SVG 元素包括：

• <rect>：矩形
• <circle>：圆形
• <line>：直线
• <path>：路径
• <text>：文本

以矩形为例，我们可以使用以下代码向 SVG 容器中添加一个灰色矩形：

const rectElement = document.createElement('rect');
rectElement.setAttribute('x', '100');
rectElement.setAttribute('y', '100');
rectElement.setAttribute('width', '200');
rectElement.setAttribute('height', '200');
rectElement.setAttribute('fill', 'gray');
svgElement.appendChild(rectElement);

以上代码会在 SVG 容器中添加一个起点坐标为 (100, 100)，宽度为 200px，高度为 200px，填充颜色为灰色的矩形。

添加 SVG 属性

除了 SVG 元素以外，我们还可以通过设置 SVG 元素的属性来调整图形的样式和显示效果。常见的 SVG 属性包括：

• fill：填充颜色
• stroke：边框颜色
• stroke-width：边框宽度
• opacity：透明度
• transform：变换

例如，我们可以使用以下代码将之前的矩形变为蓝色、改变边框宽度、以及旋转 45 度：

rectElement.setAttribute('fill', 'blue');
rectElement.setAttribute('stroke', 'black');
rectElement.setAttribute('stroke-width', '10');
rectElement.setAttribute('opacity', '0.6');
rectElement.setAttribute('transform', 'rotate(45 200 200)');

使用 SVG 库

手动编写 SVG 代码可能会比较麻烦和繁琐，不过现在有许多成熟的 SVG 库可以使用，例如 D3.js、Snap.svg 和 Raphael.js。

以 D3.js 为例，我们可以使用以下代码创建一个 SVG 容器和一个带有随机坐标和颜色的圆形：

<script src="https://d3js.org/d3.v6.min.js"></script>

<div id="svg-container"></div>

<script>
  const svg = d3.select('#svg-container')
    .append('svg')
    .attr('width', '400')
    .attr('height', '400');

  const circle = svg.append('circle')
    .attr('cx', Math.random() * 400)
    .attr('cy', Math.random() * 400)
    .attr('r', Math.random() * 50)
    .attr('fill', `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`);
</script>

总结

使用 JavaScript 生成 SVG 图像可以让我们更加灵活和方便地创建和操作矢量图形。通过手动编写 SVG 代码或使用现有的 SVG 库，我们可以轻松地实现各种图形和效果。