Установите SVG на любой размер экрана; Нет полос прокрутки - PullRequest
Новая
       0

Установите SVG на любой размер экрана; Нет полос прокрутки

1 голос
/ 06 марта 2020

Приветствую всех,

Я бы хотел подогнать график SVG к любому размеру экрана без использования полос прокрутки. Как я могу это сделать? Объясните, возможно ли автоматическое изменение размера / масштаба в зависимости от размера экрана. Например, я хочу, чтобы содержимое svg / всей страницы точно подходило к любому экрану (уменьшающемуся или расширяющемуся) без полос прокрутки.

Ниже приводится CSS, который у меня есть: 

body, html {
  height: 100%;
  width: 100%
  margin: 0;
  font-family: Arial;
}

////////// Это связанный фрагмент. Защищайте данные в коде 

 <body>
<div id="tooltip">tooltip</div>
<svg width="100" height="100" ></svg>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {
        top: 20,
        right: 60,
        bottom: 110,
        left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,

    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Пожалуйста, сообщите.

Ответы [ 3 ]

1 голос
/ 06 марта 2020

Используйте 100vh для высоты и 100vw для ширины вместо % в body, html примере: 

body, html {
    height: 100vh;
    width: 100vw;
    margin: 0;
}

и вместо установки высоты и ширины в теге <svg> используйте это : 

svg {
    max-height: 100vh;
    max-width: 100vw;
    height: 100%;
    width: 100%;
}

после этого ваш <svg> покроет все окно.

0 голосов
/ 06 марта 2020

Ваша пропущенная точка с запятой; после этой ширины: 100%; 

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: Arial;
}
svg {
  background-color: gray;
}
<svg width="100%" height="100%" ></svg>
0 голосов
/ 06 марта 2020

Попробуйте установить высоту и ширину svg равными 100VH и 100VW соответственно:

CSS: 

svg{
  height: 100vh;
  width: 100vw;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...