可使用HTML5的<svg>元素嵌入可缩放不失真图形并动态控制：一、基础嵌入与静态绘图；二、CSS控制样式与变换；三、JavaScript操作DOM实现动态更新；四、requestAnimationFrame驱动高性能动画；五、SVG Sprites复用图标资源。
js控制svg动画效果【使用】">
如果您希望在网页中嵌入可缩放、不失真的图形，或通过脚本动态控制图形状态与动画，则可以使用 HTML5 的 <svg> 元素直接定义矢量图形。以下是具体使用方式：
一、基础 SVG 嵌入与静态绘图
SVG 是基于 XML 的标记语言，可直接写入 HTML 文档内，浏览器原生解析渲染。它支持基本形状（如矩形、圆形、路径等），且所有元素均可被 CSS 样式化或 JavaScript 访问。
1、在 HTML 中插入 <svg> 标签，并设置 width 和 height 属性以定义画布尺寸。
2、在 <svg> 标签内部添加 <rect> 元素绘制矩形，设置 x、y、width、height 和 fill 属性。
立即学习“前端免费学习笔记（深入）”；
3、添加 <circle> 元素绘制圆形，指定 cx、cy、r 和 stroke 属性以控制位置、半径与描边。
4、使用 <path> 元素配合 d 属性书写贝塞尔曲线指令，实现任意复杂轮廓。
二、CSS 控制 SVG 样式与简单变换
CSS 可作用于 SVG 元素，用于修改颜色、透明度、缩放、旋转等视觉属性，无需 JavaScript 即可实现响应式样式切换与过渡效果。
1、为 <svg> 内的 <rect> 元素添加 class="box"，并在 style 标签中定义 .box { fill: blue; transition: fill 0.3s ease; }。
2、添加 :hover 伪类规则：.box:hover { fill: red; }，实现悬停变色。
3、对 <g> 分组元素应用 transform: rotate(45deg)，使其中全部子图形同步旋转。
4、使用 @keyframes 定义 animation，绑定至 <circle> 元素，驱动其 cx 坐标周期性变化。
三、JavaScript 操作 SVG DOM 实现动态更新
SVG 元素是标准 DOM 节点，可通过 document.getElementById 或 querySelector 获取并修改其属性，适用于实时数据可视化或交互反馈。
1、用 document.getElementById("myCircle") 获取 SVG 中 id 为 "myCircle" 的 <circle> 元素。
2、调用 element.setAttribute("r", "50") 修改其半径值，触发视图重绘。
3、使用 element.addEventListener("click", () => { element.setAttribute("fill", "orange"); }) 实现点击换色。
4、通过 setInterval 定期调用 setAttribute 修改 <path> 的 d 属性，生成路径形变动画。
四、使用 requestAnimationFrame 驱动高性能 SVG 动画
相比 setInterval 或 setTimeout，requestAnimationFrame 提供与屏幕刷新率同步的执行节奏，避免丢帧与卡顿，适合连续运动类 SVG 动画。
1、定义 animate() 函数，在其中更新 SVG 元素的 transform 属性或坐标值。
2、在函数末尾调用 requestAnimationFrame(animate) 形成递归调用链。
3、使用 performance.now() 计算时间差，实现基于时间的匀速位移，而非帧数依赖。
4、通过 element.style.transform = `translate(${x}px, ${y}px)` 更新位置，利用 GPU 加速渲染。
五、SVG Sprites 复用图标与符号资源
通过 <defs> 与 <symbol> 预定义图形模板，再用 <use> 引用，可减少重复代码、提升可维护性，并支持独立样式控制。
1、在 <svg> 内部顶部添加 <defs> 标签，其下嵌套 <symbol id="icon-home"> 包裹路径数据。
2、在页面任意位置插入 <svg><use href="#icon-home"></use></svg> 实例化图标。
3、为 <use> 元素设置 width、height 与 fill，fill 值将覆盖 symbol 内原始 fill。
4、多个 <use> 可引用同一 <symbol>，各自独立设置 transform 与 CSS 类名。
