адаптивный SVG с использованием viewbox

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>