javascript - 使用 View 框的响应式 SVG

Question

我已经设法通过使用像这样的 View 框使 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>