html - 如何缩放我的 SVG 以适应 d3 中其容器 div 的大小？

Question

有没有办法让我的 SVG 缩放到 #mapDiv 的尺寸？

HTML:

<div id="mapDiv">
    <svg id="mapSVG" width="960" height="600" viewbox="0 0"></svg>
</div>

JS:

var svg = d3.select("#mapSVG"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

CSS:

#mapDiv{
    border: 2px solid #000;
    border-radius: 7px;
    float: left;
    width: 50%;
}

#mapSVG{
    display: block;
    margin: auto;
}

顺便说一句，我不需要在调整页面大小时缩放 SVG。只要 SVG 在页面加载时缩放到 div 大小，这对我来说就足够了。

Answer 1

如果您正在寻找 CSS 解决方案，只需为您的 #mapDiv 指定一个固定的 height 和 width，然后让 svg 元素占用 100% 的宽度和高度。这可以从以下方面看出:

#mapDiv {
  height: 50px;
  width: 50px;
}

#mapDiv > svg {
  border: 5px solid black;
  width: 100%;
  height: 100%;
}

<div id="mapDiv">
  <svg id="mapSVG" width="960" height="600" viewbox="0 0 960 600">
  </svg>
</div>

希望对您有所帮助! :)