JavaScript SVG基础

JavaScript SVG基础

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML的矢量图形格式，广泛用于Web数据可视化。在JavaScript中，可以通过操作SVG元素来创建动态、交互式的图形和图表。本章将介绍SVG的基础知识，包括其语法、常用元素、JavaScript操作方式以及实际应用案例。

1. SVG简介

SVG是一种使用XML描述二维矢量图形的语言，具有以下特点：

• 矢量特性：图形由数学公式定义，缩放不失真
• DOM接口：可通过JavaScript直接操作
• 交互性：支持事件处理和动画
• 轻量级：文件体积通常较小

2. 基本SVG元素

2.1 基本形状

SVG提供多种预定义形状元素：

<!-- 矩形 -->
<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" fill="blue" stroke="black"/>
</svg>

<!-- 圆形 -->
<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" stroke="black"/>
</svg>

<!-- 直线 -->
<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="green" stroke-width="2"/>
</svg>

2.2 路径(Path)

Path是最强大的SVG元素，可以创建任意形状：

<svg width="200" height="200">
  <path d="M10 10 L190 10 L100 190 Z" fill="yellow" stroke="black"/>
</svg>

路径命令说明：

• M = 移动到 (moveto)
• L = 画线到 (lineto)
• Z = 闭合路径

3. JavaScript操作SVG

3.1 创建SVG元素

使用JavaScript动态创建SVG元素：

// 创建SVG容器
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
document.body.appendChild(svg);

// 创建圆形
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "80");
circle.setAttribute("fill", "purple");
svg.appendChild(circle);

3.2 交互示例

添加鼠标交互效果：

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "orange");

rect.addEventListener("mouseover", () => {
    rect.setAttribute("fill", "red");
});

rect.addEventListener("mouseout", () => {
    rect.setAttribute("fill", "orange");
});

svg.appendChild(rect);

4. 数据可视化案例

4.1 简单柱状图

使用SVG创建动态柱状图：

const data = [30, 70, 45, 90, 60];
const svgWidth = 400, svgHeight = 200;
const barWidth = 60, barPadding = 10;

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", svgWidth);
svg.setAttribute("height", svgHeight);

data.forEach((value, i) => {
    const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    const x = i * (barWidth + barPadding);
    const y = svgHeight - value;
    
    bar.setAttribute("x", x);
    bar.setAttribute("y", y);
    bar.setAttribute("width", barWidth);
    bar.setAttribute("height", value);
    bar.setAttribute("fill", `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`);
    
    svg.appendChild(bar);
});

document.body.appendChild(svg);

4.2 饼图

使用SVG路径创建饼图：

pie title 浏览器市场份额 "Chrome" : 65 "Firefox" : 15 "Safari" : 10 "Edge" : 8 "其他" : 2

5. 高级技巧

5.1 SVG动画

使用SMIL(SVG动画)创建平滑过渡：

<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="blue">
    <animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite"/>
  </circle>
</svg>

5.2 使用D3.js

D3.js是强大的数据可视化库，简化了SVG操作：

import * as d3 from "d3";

const dataset = [10, 20, 30, 40, 50];
const svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 200);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", d => 200 - d * 3)
    .attr("width", 50)
    .attr("height", d => d * 3)
    .attr("fill", "steelblue");

6. 数学公式应用

SVG可以完美呈现数学公式和图形，例如绘制正弦波：

$y=A\cdot \sin (2\pi ft+\varphi )$

对应的SVG实现：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "200");

let pathData = "M0 100";
for(let x = 0; x <= 400; x++) {
    const y = 100 + 50 * Math.sin(x / 20);
    pathData += ` L${x} ${y}`;
}

const wave = document.createElementNS("http://www.w3.org/2000/svg", "path");
wave.setAttribute("d", pathData);
wave.setAttribute("stroke", "blue");
wave.setAttribute("fill", "none");
svg.appendChild(wave);

document.body.appendChild(svg);

7. 最佳实践

• 使用CSS样式化SVG元素
• 对于复杂图形，考虑使用<path>而非多个基本形状
• 优化性能：减少DOM节点数量
• 考虑可访问性：添加<title>和<desc>元素

总结

SVG为JavaScript数据可视化提供了强大而灵活的工具。通过掌握SVG基础知识，开发者可以创建从简单图表到复杂交互式可视化的各种图形。随着对SVG理解的深入，可以进一步探索高级库如D3.js，或结合Canvas实现更复杂的可视化效果。