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

Мне удалось сделать SVG отзывчивым, используя окно просмотра следующим образом:

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

Он отзывчивый и становится меньше по мере уменьшения размера экрана. Единственная проблема заключается в том, что SVG слишком велик при загрузке на максимальном экране. Могу ли я установить максимальный размер? Таким образом, он не становится слишком большим, когда достигает максимального размера, даже если экран большой.


javascript svg responsive d3.js viewbox
person Brian    schedule 26.12.2018    source источник
comment
Не могли бы вы создать jsfiddle.   -  person Nusrath    schedule 27.12.2018

Ответы (1)


arrow_upward
1
arrow_downward

Почему бы не использовать 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>

person ksav    schedule 26.12.2018
comment
Вы можете установить max-width непосредственно в элементе <svg>. Встроенное в HTML, оно действует как встроенное поле. - person ccprog; 26.12.2018