如何避免SVG在容器缩小时伸缩？

基础概念

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以在不失真的情况下进行缩放。然而，当SVG放置在容器中时，容器的大小变化可能会影响SVG的显示效果。

类型

内联SVG：直接嵌入HTML文档中的SVG代码。
外部SVG：通过<img>标签或CSS背景引入的SVG文件。

应用场景

网页图标：用于网站导航栏、按钮等。
数据可视化：用于图表、图形等。
动画效果：通过SVG实现复杂的动画效果。

问题及解决方法

问题描述

当SVG放置在容器中，容器缩小时，SVG可能会随之缩小，导致布局问题。

原因

SVG的默认行为是响应式缩放，以适应容器的大小。

解决方法

固定宽高：为SVG设置固定的宽度和高度，使其不受容器大小的影响。
固定宽高：为SVG设置固定的宽度和高度，使其不受容器大小的影响。
使用CSS控制：通过CSS设置SVG的宽度和高度，使其保持不变。
使用CSS控制：通过CSS设置SVG的宽度和高度，使其保持不变。
使用object-fit属性：虽然object-fit主要用于图像，但在某些情况下也可以用于SVG。
使用object-fit属性：虽然object-fit主要用于图像，但在某些情况下也可以用于SVG。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Fixed Size Example</title>
  <style>
    .svg-container {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    .svg-container svg {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
  </div>
</body>
</html>