SVG（可缩放矢量图形）是前端开发中不可或缺的技术，它既能实现高清无损缩放，又能通过代码动态控制，完美适配复杂交互场景。本文将从基础到进阶，带你快速掌握SVG的核心技巧。

SVG的核心优势

矢量图形，无限缩放
SVG基于数学公式绘制，放大缩小不会失真，特别适合图标、图表等需要适配多尺寸的场景。
代码可控，动态交互
通过JavaScript可直接修改SVG属性（如颜色、尺寸），结合CSS动画可实现复杂效果。
轻量高效，性能友好
相比位图（如PNG），SVG文件体积更小，且支持GPU加速渲染。

SVG必学技巧

1. 动态操作元素
通过JavaScript选中SVG元素并修改属性，是SVG动态化的基础。例如点击按钮改变颜色：

const circle = document.getElementById('myCircle');
circle.setAttribute('fill', 'blue');

常用API：getElementById、querySelector、setAttribute。

2. 与CSS深度结合

样式控制：通过CSS修改SVG的填充色、边框等属性：

rect { fill: #FFD75A; stroke: #ED424B; }

动画效果：利用@keyframes实现渐变、旋转等动画。

3. 动画实现方案

原生SVG动画：使用<animate>标签实现简单补间动画。
JavaScript控制：通过requestAnimationFrame逐帧控制，或使用GSAP库实现复杂时间轴动画。

4. 响应式适配
通过viewBox和preserveAspectRatio属性实现自适应布局：

<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
  <circle cx="100" cy="100" r="90" fill="orange"/>
</svg>

viewBox定义画布可见区域，preserveAspectRatio控制缩放对齐方式。

实战案例：动态渐变边框

设计师导出的SVG往往尺寸固定，通过代码改造可实现自适应：

<button>
  <svg width="100%" height="100%">
    <rect x="2" y="2" width="calc(100% - 4px)" height="calc(100% - 4px)" 
          rx="8" stroke="url(#gradient)" stroke-width="4"/>
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#FFD75A"/>
        <stop offset="100%" stop-color="#ED424B"/>
      </linearGradient>
    </defs>
  </svg>
  <span>点击按钮</span>
</button>

关键点：

width="100%"让SVG充满容器。
calc(100% - 4px)避免描边溢出。
渐变ID绑定实现动态颜色。

高频面试题

Canvas和SVG的区别？

Canvas是位图，适合游戏、图像处理；SVG是矢量图，适合图标、图表。
SVG支持事件绑定，Canvas需手动计算坐标。

viewBox的作用是什么？
定义画布坐标系和缩放比例，格式为viewBox="minX minY width height"。
如何用JavaScript动态添加SVG元素？

const svg = document.createElementNS("http://www.w3.org/2000/svg", "circle");
svg.setAttribute("cx", "50");
document.querySelector("svg").appendChild(svg);

需使用createElementNS指定命名空间。

4. SVG如何实现自适应屏幕？
设置viewBox和preserveAspectRatio="xMidYMid meet"，监听resize事件动态调整尺寸。

5. 如何优化SVG性能？

避免频繁DOM操作，使用transform代替位置属性。
复杂动画优先使用CSS或GSAP库。

SVG既能实现精致视觉效果，又能通过代码赋予动态灵魂。掌握这个技巧后，不妨尝试用SVG制作一个交互式图表或动画按钮，感受其强大之处。记住，技术进阶的秘诀是：动手实践，持续迭代！

思凡资源网

前端开发-SVG从入门到实战

SVG的核心优势

SVG必学技巧

实战案例：动态渐变边框

高频面试题