使 svg 适合任何屏幕尺寸；无滚动条

向大家致敬，

我想将 SVG 绘图适合任何屏幕尺寸，而不产生滚动条。我怎样才能这样做呢？请解释是否可以根据屏幕尺寸自动调整/缩放。例如，我希望 svg/整个页面的内容完全适合任何屏幕（缩小或扩大），没有滚动条。

以下是我的CSS：

body, html {

height: 100%;

width: 100%

margin: 0;

font-family: Arial;

}

////////// 这是一个相关的块。保护代码中的数据

<body>

<div id="tooltip">tooltip</div>

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 + ")");

请指教。

qq_遁去的一_1

浏览 155回答 3

3回答

波斯汪

用于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>将覆盖整个窗口。

动漫人物

尝试将 svg 的高度和宽度分别设置为 100VH 和 100VW：CSS：svg{  height: 100vh;  width: 100vw;}

跃然一笑

;之后你错过了分号width: 100%;body, html {  height: 100%;  width: 100%;  margin: 0;  font-family: Arial;}svg {  background-color: gray;}<svg width="100%" height="100%" ></svg>

随时随地看视频慕课网APP