SVG 的 defs 和 use 元素如何实现图形复用 - 面试题

SVG 提供了 <defs> 和 <use> 元素，用于定义可重用的图形组件，这是 SVG 的一个强大特性：

1. defs 元素 <defs> 元素用于定义可重用的元素，这些元素不会直接渲染，只有被引用时才会显示。

svg
<svg width="200" height="200">
  <defs>
    <!-- 定义渐变 -->
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="100%" stop-color="#4ecdc4" />
    </linearGradient>
    
    <!-- 定义滤镜 -->
    <filter id="myShadow">
      <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.3" />
    </filter>
    
    <!-- 定义图形 -->
    <circle id="myCircle" cx="0" cy="0" r="20" fill="url(#myGradient)" />
  </defs>
  
  <!-- 使用定义的图形 -->
  <use href="#myCircle" x="50" y="50" />
  <use href="#myCircle" x="150" y="50" />
</svg>

2. symbol 元素 <symbol> 元素用于定义可重用的图形模板，类似于组件。

svg
<svg width="200" height="200">
  <defs>
    <symbol id="icon-home" viewBox="0 0 24 24">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
    </symbol>
    
    <symbol id="icon-user" viewBox="0 0 24 24">
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
    </symbol>
  </defs>
  
  <!-- 使用定义的图标 -->
  <svg width="24" height="24">
    <use href="#icon-home" />
  </svg>
  
  <svg width="48" height="48">
    <use href="#icon-user" />
  </svg>
</svg>

3. use 元素 <use> 元素用于引用和重用定义的元素。

基本用法：

svg
<use href="#elementId" x="50" y="50" />

属性说明：

href：引用元素的 ID（使用 # 前缀）
x, y：引用位置
width, height：引用尺寸（仅适用于 symbol）
transform：变换

4. 实际应用示例

图标系统：

svg
<!-- 定义图标库 -->
<svg style="display: none;">
  <defs>
    <symbol id="icon-search" viewBox="0 0 24 24">
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    </symbol>
    
    <symbol id="icon-menu" viewBox="0 0 24 24">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
    </symbol>
  </defs>
</svg>

<!-- 使用图标 -->
<button>
  <svg width="20" height="20" aria-hidden="true">
    <use href="#icon-search" />
  </svg>
  搜索
</button>

<button>
  <svg width="20" height="20" aria-hidden="true">
    <use href="#icon-menu" />
  </svg>
  菜单
</button>

图案填充：

svg
<svg width="200" height="200">
  <defs>
    <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="#ff6b6b" />
    </pattern>
  </defs>
  
  <rect width="200" height="200" fill="url(#myPattern)" />
</svg>

5. 优势

减少代码重复
提高可维护性
减小文件大小
便于统一修改
支持动态样式

6. 最佳实践

将常用图形定义为 symbol
使用有意义的 ID 命名
合理组织 defs 结构
考虑使用 SVG sprite 技术
为可重用元素添加适当的描述