调整 SVG 的大小以填充 div

Posted 2023-03-28

【中文标题】调整 SVG 的大小以填充 div

【英文标题】：Resizing an SVG to fill a div

【发布时间】：2022-01-09 03:15:32

【问题描述】：

我有一个带有 SVG 的 div

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

<svg class="svg"  >
  <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 移除 只会使蓝色框变小。绿色框不会改变大小或填充框。

你需要一个 viewBox 属性而不是 width 和 height 属性。这样，svg 将占据 div 内所有可用的宽度。

但是您删除了硬编码约束。现在接管 CSS 并设置 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 值。有几种方法可以做到这一点。检查 *** 上的其他问题以获取一些解决方案。或者发布一个指向您的 SVG 的链接，我们可以告诉您应该是什么。