SVG 如何与 CSS 结合使用 - 面试题

SVG 与 CSS 的结合使用可以创建丰富的视觉效果和交互体验。以下是 SVG 与 CSS 结合的多种方式：

1. 基本样式应用 CSS 可以直接应用于 SVG 元素，就像应用于 HTML 元素一样。

svg
<svg width="200" height="200">
  <style>
    .circle {
      fill: blue;
      stroke: red;
      stroke-width: 2;
    }
    
    .rectangle {
      fill: green;
      stroke: black;
      stroke-width: 3;
    }
  </style>
  
  <circle class="circle" cx="100" cy="100" r="50" />
  <rect class="rectangle" x="20" y="20" width="80" height="60" />
</svg>

2. CSS 伪类 使用 CSS 伪类实现交互效果。

svg
<svg width="200" height="200">
  <style>
    .interactive {
      fill: blue;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .interactive:hover {
      fill: red;
      transform: scale(1.1);
    }
    
    .interactive:active {
      fill: green;
    }
    
    .interactive:focus {
      outline: 3px solid #005fcc;
      outline-offset: 2px;
    }
  </style>
  
  <circle class="interactive" cx="100" cy="100" r="50" tabindex="0" />
</svg>

3. CSS 动画 使用 CSS 的 @keyframes 实现动画效果。

svg
<svg width="200" height="200">
  <style>
    .rotating {
      transform-origin: center;
      animation: rotate 2s linear infinite;
    }
    
    .pulsing {
      animation: pulse 1s ease-in-out infinite;
    }
    
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }
  </style>
  
  <rect class="rotating" x="75" y="75" width="50" height="50" fill="blue" />
  <circle class="pulsing" cx="100" cy="100" r="30" fill="red" />
</svg>

4. CSS 变量 使用 CSS 变量实现动态样式。

svg
<svg width="200" height="200">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #e74c3c;
      --stroke-width: 2px;
    }
    
    .dynamic {
      fill: var(--primary-color);
      stroke: var(--secondary-color);
      stroke-width: var(--stroke-width);
    }
    
    .dynamic:hover {
      --primary-color: #2ecc71;
    }
  </style>
  
  <circle class="dynamic" cx="100" cy="100" r="50" />
</svg>

5. 外部 CSS 文件 将 SVG 样式放在外部 CSS 文件中。

html
<!-- HTML 文件 -->
<link rel="stylesheet" href="styles.css" />

<svg width="200" height="200">
  <circle class="styled-circle" cx="100" cy="100" r="50" />
</svg>

css
/* styles.css */
.styled-circle {
  fill: #3498db;
  stroke: #2c3e50;
  stroke-width: 3px;
  transition: all 0.3s ease;
}

.styled-circle:hover {
  fill: #e74c3c;
  transform: scale(1.1);
}

6. CSS 选择器 使用各种 CSS 选择器精确控制 SVG 元素。

svg
<svg width="200" height="200">
  <style>
    /* ID 选择器 */
    #unique-circle {
      fill: red;
    }
    
    /* 类选择器 */
    .blue-circle {
      fill: blue;
    }
    
    /* 属性选择器 */
    circle[fill="green"] {
      stroke: black;
      stroke-width: 2;
    }
    
    /* 后代选择器 */
    .group circle {
      fill: purple;
    }
    
    /* 伪元素 */
    .special::after {
      content: '';
      /* SVG 不支持伪元素，但可以用于 SVG 内的 HTML 元素 */
    }
  </style>
  
  <circle id="unique-circle" cx="50" cy="50" r="20" />
  <circle class="blue-circle" cx="100" cy="50" r="20" />
  <circle fill="green" cx="150" cy="50" r="20" />
  
  <g class="group">
    <circle cx="50" cy="100" r="20" />
    <circle cx="100" cy="100" r="20" />
  </g>
</svg>

7. 响应式 SVG 结合 CSS 媒体查询实现响应式 SVG。

svg
<svg width="100%" height="auto" viewBox="0 0 200 200">
  <style>
    @media (max-width: 768px) {
      .responsive-element {
        fill: blue;
      }
    }
    
    @media (min-width: 769px) {
      .responsive-element {
        fill: red;
      }
    }
  </style>
  
  <circle class="responsive-element" cx="100" cy="100" r="50" />
</svg>

8. CSS transform 使用 CSS transform 实现变换效果。

svg
<svg width="200" height="200">
  <style>
    .transformed {
      transition: transform 0.3s ease;
    }
    
    .transformed:hover {
      transform: translate(20px, 20px) rotate(45deg) scale(1.2);
    }
  </style>
  
  <rect class="transformed" x="75" y="75" width="50" height="50" fill="blue" />
</svg>

最佳实践：

优先使用 CSS 实现动画和交互
将样式与结构分离
使用 CSS 变量提高可维护性
考虑性能，避免过度使用复杂动画
测试跨浏览器兼容性
使用 CSS 过渡实现平滑效果