svg动图引入html—svg.js 动画：代码示例

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML语言。在网页中引入SVG动图可以通过使用svg.js库来实现动画效果。svg.js是一个强大的SVG库，可以通过简单的JavaScript代码来创建和操作SVG元素，以实现各种动画效果。

我们需要在HTML文件中引入svg.js库。可以通过以下代码实现：

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.15/svg.min.js"></script>

接下来，我们可以使用svg.js库来创建SVG画布，并在画布上添加各种形状和元素。例如，我们可以创建一个圆形，并设置其半径、颜色和位置：

// 创建SVG画布
var draw = SVG().addTo('#svg-container').size(300, 300);
// 创建圆形
var circle = draw.circle(50).fill('red').move(100, 100);

上述代码中，我们首先使用`SVG()`函数创建了一个SVG画布，并通过`addTo('#svg-container')`将其添加到id为"svg-container"的HTML元素中。然后，我们使用`size(300, 300)`设置画布的大小为300x300像素。接着，我们使用`circle()`函数创建一个半径为50的圆形，并使用`fill('red')`设置其填充颜色为红色。我们使用`move(100, 100)`将圆形移动到画布上的坐标(100, 100)处。

除了创建静态的形状和元素，我们还可以使用svg.js库来实现动画效果。例如，我们可以使用`animate()`函数来实现圆形的平移动画：

circle.animate(1000).move(200, 200);

上述代码中，我们使用`animate(1000)`函数将圆形的动画时长设置为1000毫秒（1秒），然后使用`move(200, 200)`将圆形移动到坐标(200, 200)处。这样，圆形将在1秒内从原来的位置平滑地移动到新的位置。

通过使用svg.js库，我们可以轻松地创建和操作SVG元素，并实现各种动画效果。以上是一个简单的示例，你可以根据自己的需求和想象力，使用svg.js库创造出更加丰富和复杂的SVG动画效果。