使用视图框的响应式 SVG

Question

我已经通过像这样使用视图框使 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>

使用视图框的响应式 SVG

responsive SVG using viewbox

javascript

svg

viewbox

d3.js

responsive