加入购物车—— SVG轻松实现路径动画

在电子商务网站中，加入购物车是最为基础的交互之一。但是，如何让用户更好地感知到加入购物车的过程呢？通过使用SVG路径动画，我们可以增强用户对于加入购物车的感知，提供更美观、流畅的动态效果。

SVG路径动画简介

SVG（Scalable Vector Graphics）是一种矢量图形格式，能够为Web页面提供可伸缩的、灵活的图像解决方案。SVG路径动画是一种创建动态图形的技术，它基于XML语法，允许我们定义和控制图形元素的属性，从而创造出非常生动、有趣的视觉效果。

实现步骤

第一步：编写SVG图形

首先，我们需要编写一个SVG图形来表示购物车的样式。以下是代码示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M21 9h-2.76c-.34-1.31-1.52-2.29-2.97-2.35l-1.27-.07-.33-1.22c-.25-.91-1.13-1.54-2.1-1.54h-4.94c-.97 0-1.85.63-2.1 1.54l-.33 1.22-1.27.07c-1.45.06-2.63 1.04-2.97 2.35h-2.76v2h18zm-13 9c0 1.1.9 2 2 2s2-.9 2-2h-4zm4-5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm6-5c0-1.1-.9-2-2-2s-2 .9-2 2h4zm-4 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
</svg>

第二步：定义动画路径

接下来，我们需要定义一条路径，用于表示加入购物车的轨迹。路径可以通过 <path> 元素来实现。以下是代码示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path id="cart-path" d="M21 9h-2.76c-.34-1.31-1.52-2.29-2.97-2.35l-1.27-.07-.33-1.22c-.25-.91-1.13-1.54-2.1-1.54h-4.94c-.97 0-1.85.63-2.1 1.54l-.33 1.22-1.27.07c-1.45.06-2.63 1.04-2.97 2.35h-2.76v2h18zm-13 9c0 1.1.9 2 2 2s2-.9 2-2h-4zm4-5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm6-5c0-1.1-.9-2-2-2s-2 .9-2 2h4zm-4 5c-.83

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/36622) ，转载请注明来源
[https://www.javascriptcn.com/post/36622](https://www.javascriptcn.com/post/36622)