Как определить отступы для отзывчивого SVG - PullRequest
Новая
       17

Как определить отступы для отзывчивого SVG

0 голосов
/ 28 мая 2020

до некоторого учебника, чтобы сделать визуализацию d3. js svg адаптивной, мы действуем следующим образом.

Мы включаем наши svgs в индекс. html вот так: 

        <div class="col-8" data-step="8" data-intro="How cool is this barchart?"> <!-- BAR -->
            <div class="svg-container" style="padding-bottom: 20%">
                <svg id="bar" viewBox="0 0 1000 275" class="svg-content"  preserveAspectRatio="none"></svg>
            </div>
        </div>

Затем в javascript мы создаем svg размером 1000x275, который привязан к элементу svg по id.

В css мы определяем следующее: 

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: top;
  overflow: hidden;
}
.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

Когда вы изменяете размер страницы, браузер меняет размер svg, и это работает очень хорошо. Проблема в том, что при использовании подобного отступа у svg появляется огромное количество нижнего отступа, занимающего много места, которое не требуется.

Что мы должны изменить в наших определениях, чтобы решить эту проблему?

Большое спасибо за ответы!

...