简介
SVG（Scalable Vector Graphics）即可缩放矢量图形，是一种基于XML的图像格式。与传统的位图图像格式（比如JPEG和PNG）不同，SVG是基于矢量的，可以无限放大而不会失真，并且可以通过CSS和JavaScript进行动态交互和动画效果的实现。本篇博客将介绍SVG图形及动画的应用实践。
SVG图形
基本形状
SVG支持多种基本形状的绘制，如矩形、圆形、椭圆、线段和多边形等。通过使用SVG标签，可以轻松地绘制这些基本形状，并使用CSS进行样式设计。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="20" y="20" width="100" height="100" fill="red" />
<circle cx="200" cy="70" r="50" fill="blue" />
<ellipse cx="400" cy="70" rx="50" ry="25" fill="green" />
<line x1="20" y1="200" x2="200" y2="200" stroke="black" />
<polygon points="60 220 100 300 140 220" fill="orange" />
</svg>
以上代码会绘制一个红色的矩形、蓝色的圆形、绿色的椭圆、黑色的线段和橙色的多边形。
路径
除了基本形状外，SVG还支持通过路径来绘制各种复杂的图形。路径是一系列的命令和参数，用于绘制直线、曲线和各种几何图形。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M100 100 L300 100 L200 300 Z" fill="none" stroke="black" />
</svg>
以上代码会绘制一个三角形。
文字
SVG可以在图像中添加文本，在SVG中使用text标签定义文本内容，并使用CSS样式进行格式设置。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="100" y="200" font-family="Verdana" font-size="35" fill="black">
Hello World!
</text>
</svg>
以上代码会在图像中心绘制一个黑色的"Hello World!"文本。
渐变
SVG支持线性渐变和径向渐变，可以为图形和文本添加渐变色。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
</linearGradient>
</defs>
<rect x="20" y="20" width="250" height="200" fill="url(#gradient)" />
</svg>
以上代码会绘制一个由黄色渐变为红色的矩形。
SVG动画
除了静态图形绘制外，SVG还支持各种动画效果的实现。可以使用CSS或JavaScript来控制SVG元素的动态变化。
CSS动画
SVG的CSS动画可以通过@keyframes规则和animation属性来定义和控制。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="50" fill="red">
<animate attributeName="cx" from="100" to="500" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
以上代码会绘制一个红色的圆形，并使其在5秒内从初始位置移动到x坐标为500的位置，并以无限次数重复此动画。
JavaScript动画
SVG的JavaScript动画可以通过setInterval或requestAnimationFrame函数来实现。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle id="circle" cx="100" cy="100" r="50" fill="red" />
</svg>
<script>
var circle = document.getElementById('circle');
var cx = 100;
setInterval(function() {
cx += 1;
circle.setAttribute('cx', cx);
}, 10);
</script>
以上代码会绘制一个红色的圆形，并使其每10毫秒向右移动1个单位。
总结
SVG图形及动画的应用非常广泛，可以用于制作图表、数据可视化、网页效果等。通过简单的代码就可以绘制出丰富多样的图形，并通过动画效果增添用户体验。掌握SVG及其动画的基本知识，对于前端开发人员来说是一项重要的技能。希望本篇博客能为大家提供一些关于SVG图形及动画的实践经验和启发。
本文来自极简博客，作者：文旅笔记家，转载请注明原文链接：SVG图形及动画应用实践
