编辑“︁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提供多种预定义形状元素：

<syntaxhighlight lang="html">
<!-- 矩形 -->
<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>
</syntaxhighlight>

=== 2.2 路径(Path) ===
Path是最强大的SVG元素，可以创建任意形状：

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

路径命令说明：
* M = 移动到 (moveto)
* L = 画线到 (lineto)
* Z = 闭合路径

== 3. JavaScript操作SVG ==

=== 3.1 创建SVG元素 ===
使用JavaScript动态创建SVG元素：

<syntaxhighlight lang="javascript">
// 创建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);
</syntaxhighlight>

=== 3.2 交互示例 ===
添加鼠标交互效果：

<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

== 4. 数据可视化案例 ==

=== 4.1 简单柱状图 ===
使用SVG创建动态柱状图：

<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

=== 4.2 饼图 ===
使用SVG路径创建饼图：

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

== 5. 高级技巧 ==

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
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");
</syntaxhighlight>

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

<math>
y = A \cdot \sin(2\pi f t + \phi)
</math>

对应的SVG实现：

<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

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

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数据可视化]]