Question

我已经设法通过使用这样的viewbox来使SVG响应：

var svg = d3.select("#vis").append("svg") 
            .attr("width", "100%")
            .attr("height", "100%") 
            .attr("viewBox", "0 0 960 500")
            .attr("preserveAspectRatio", "none");

它具有响应性，并且随着屏幕尺寸变小而变小。唯一的问题是，在最大屏幕中加载时，SVG太大。我可以设定最大尺寸吗？因此，即使屏幕很大，一旦达到最大大小，它也不会变得太大。

Answer 1

为什么不使用CSS为容器提供最大宽度？

var svg = d3.select("#vis").append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 960 500")
  .attr("preserveAspectRatio", "none");
  
svg.append('circle')
  .attr('r', 100)
  .attr('cx', 300)
  .attr('cy', 300)

#vis {
  max-width: 960px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="vis"></div>

使用viewbox的响应式SVG

1 个答案: