调整 SVG 的大小以填充 div答案

【问题标题】：Resizing an SVG to fill a div调整 SVG 的大小以填充 div
【发布时间】：2022-01-09 03:15:32
【问题描述】：

我有一个带有 SVG 的 div

div 由蓝点勾勒，SVG 由绿点勾勒。我的 HTML 文件中的 SVG 代码：

<svg class="svg" height="500px" width="50%">
  <g class="chart" transform="translate(0,0)">
    <g class="state-g"> (Map here) </g>
  </g>
</svg>

我的相关 CSS：

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  position: relative;
  align-content: center;
  padding-left: 10%;
  padding-right: 10%;
}

.svg {
  outline: 5px dotted blue;
  font: inherit;
  display: block;
  margin: auto;
}

svg g.chart {
  outline: 5px dotted green;

【问题讨论】：

您的 SVG 具有明确的硬编码尺寸 height="500px" width="50%"，并且在 CSS 中没有任何其他内容试图使其填充其父级（宽度：100%、高度：100% 等）
你试过了吗？
@Jeremy-Thille 移除 height="500px" width="50%" 只会使蓝色框变小。绿色框不会改变大小或填充框。
你需要一个 viewBox 属性而不是 width 和 height 属性。这样，svg 将占据 div 内所有可用的宽度。
但是您删除了硬编码约束。现在接管 CSS 并设置 SVG 的尺寸。

标签： javascript html svg

【解决方案1】：

如果您希望 SVG 自动缩放以填充其容器，那么它需要具有 viewBox 属性。

<svg class="svg" viewBox="...something...">
  <g class="chart" transform="translate(0,0)">
    <g class="state-g"> (Map here) </g>
  </g>
</svg>

viewBox 的正确值将取决于该 SVG content 的边界。检查您的原始地图文件：

如果它有 viewBox，则使用它。
如果它没有viewBox，但它硬连线了width 和height，那么就使用它们。例如，如果它有 width="200px" height="350px"，则将这些值替换为 viewBox="0 0 200 350"。
如果两者都没有。然后你需要计算出正确的 viewBox 值。有几种方法可以做到这一点。检查 StackOverflow 上的其他问题以获取一些解决方案。或者发布一个指向您的 SVG 的链接，我们可以告诉您应该是什么。

【讨论】：