当前位置：首页 > web >正文

SVG 知识详解：从入门到精通

web 2025/5/15 5:42:53

SVG 知识详解：从入门到精通

作为一名前端开发者，我经常会被SVG的魅力所折服。这种基于XML的矢量图形格式，不仅能完美适配各种屏幕分辨率，还能通过CSS和JavaScript进行灵活控制。今天，就让我们一起来深入探索SVG的世界。

一、SVG是什么？

SVG（Scalable Vector Graphics）是一种用XML描述二维图形的矢量图形格式。与位图不同，SVG图形由数学公式定义，因此可以无限放大而不失真。

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

上面这段简单的代码就能绘制一个黄色的圆，是不是很神奇？

二、SVG基础图形

SVG提供了多种基础图形元素：

矩形 <rect>

<rect x="10" y="10" width="80" height="80" fill="blue" />

圆形 <circle>

<circle cx="50" cy="50" r="40" fill="red" />

椭圆 <ellipse>

<ellipse cx="50" cy="50" rx="40" ry="30" fill="green" />

线条 <line>

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

多边形 <polygon>

<polygon points="50,5 90,90 10,90" fill="purple" />

折线 <polyline>

<polyline points="10,10 40,40 10,70 40,100" fill="none" stroke="orange" />

三、SVG路径

<path>元素是SVG中最强大的图形元素，可以绘制任意形状。它使用d属性定义路径数据：

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="black" />

路径命令包括：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

四、SVG文本

SVG可以完美呈现文本：

<text x="10" y="50" font-family="Arial" font-size="20" fill="red">Hello SVG World!
</text>

五、SVG样式

SVG支持多种样式设置方式：

内联样式

<rect x="10" y="10" width="80" height="80" style="fill:blue;stroke:pink;stroke-width:5" />

CSS样式

<style>.myRect {fill: blue;stroke: pink;stroke-width: 5;}
</style><rect x="10" y="10" width="80" height="80" class="myRect" />

属性样式

<rect x="10" y="10" width="80" height="80" fill="blue" stroke="pink" stroke-width="5" />

六、SVG动画

SVG支持多种动画效果：

CSS动画

<style>@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}.spinner {animation: rotate 2s linear infinite;}
</style><rect x="25" y="25" width="50" height="50" class="spinner" fill="blue" />

SMIL动画

<circle cx="50" cy="50" r="20" fill="red"><animate attributeName="cx" from="50" to="450" dur="5s" repeatCount="indefinite" />
</circle>

JavaScript动画

const circle = document.querySelector(circle);
let angle = 0;function animate() {angle += 0.02;circle.setAttribute(cx, 50 + Math.sin(angle) * 40);circle.setAttribute(cy, 50 + Math.cos(angle) * 40);requestAnimationFrame(animate);
}animate();

七、SVG滤镜

SVG滤镜可以创建各种视觉效果：

<defs><filter id="blur" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter>
</defs><rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />

八、SVG实际应用

图标系统

<svg class="icon"><use xlink:href="#icon-home"></use>
</svg>

数据可视化

// 使用D3.js创建SVG图表
const data = [10, 20, 30, 40, 50];d3.select(svg).selectAll(rect).data(data).enter().append(rect).attr(x, (d, i) => i * 30).attr(y, d => 100 - d).attr(width, 25).attr(height, d => d).attr(fill, steelblue);

交互式图形

const svg = document.querySelector(svg);svg.addEventListener(mousemove, (e) => {const rect = svg.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;document.querySelector(circle).setAttribute(cx, x);document.querySelector(circle).setAttribute(cy, y);
});