如何在响应式设计中使用 SVG - 面试题

SVG 在响应式设计中有独特的优势和应用方式，可以创建适应各种屏幕尺寸的图形：

1. 使用 viewBox 实现响应式 viewBox 是 SVG 响应式设计的核心，定义了内部坐标系。

svg
<svg viewBox="0 0 100 100" width="100%" height="auto">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

关键点：

viewBox 定义内部坐标系
width/height 使用百分比或 auto
SVG 会根据容器自动缩放

2. preserveAspectRatio 控制缩放行为 控制 SVG 如何适应容器。

svg
<!-- 保持比例，完整显示 -->
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" 
     width="100%" height="100%">

<!-- 保持比例，填充容器 -->
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" 
     width="100%" height="100%">

<!-- 拉伸填充 -->
<svg viewBox="0 0 100 100" preserveAspectRatio="none" 
     width="100%" height="100%">

3. 响应式图标系统 创建可缩放的图标系统。

svg
<!-- 图标定义 -->
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <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>
</svg>

<!-- 使用图标，自动适应容器 -->
<svg class="icon" width="24" height="24">
  <use href="#icon-home"/>
</svg>

<svg class="icon" width="48" height="48">
  <use href="#icon-search"/>
</svg>

CSS 样式：

css
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* 不同尺寸的图标 */
.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 48px;
  height: 48px;
}

4. 响应式图表 创建适应屏幕的图表。

svg
<svg viewBox="0 0 400 200" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
  <!-- 柱状图 -->
  <rect x="20" y="80" width="40" height="100" fill="blue" />
  <rect x="80" y="50" width="40" height="130" fill="green" />
  <rect x="140" y="30" width="40" height="150" fill="red" />
  <rect x="200" y="60" width="40" height="120" fill="yellow" />
  
  <!-- 坐标轴 -->
  <line x1="10" y1="190" x2="390" y2="190" stroke="black" stroke-width="2"/>
  <line x1="10" y1="10" x2="10" y2="190" stroke="black" stroke-width="2"/>
</svg>

5. 媒体查询结合 SVG 使用 CSS 媒体查询调整 SVG 显示。

css
/* 小屏幕 */
@media (max-width: 768px) {
  .responsive-svg {
    width: 100%;
    height: auto;
  }
}

/* 大屏幕 */
@media (min-width: 769px) {
  .responsive-svg {
    width: 50%;
    height: auto;
  }
}

6. 响应式背景 SVG 使用 SVG 作为响应式背景。

css
.hero-section {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%233498db"/></svg>');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

7. JavaScript 动态调整 使用 JavaScript 根据容器动态调整 SVG。

javascript
function resizeSVG() {
  const container = document.querySelector('.svg-container');
  const svg = container.querySelector('svg');
  
  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;
  
  svg.setAttribute('width', containerWidth);
  svg.setAttribute('height', containerHeight);
}

window.addEventListener('resize', resizeSVG);
resizeSVG(); // 初始化

最佳实践：

始终使用 viewBox
合理使用 preserveAspectRatio
考虑移动端性能
使用 CSS 控制尺寸
测试各种屏幕尺寸
优化 SVG 文件大小