使 svg 适合任何屏幕尺寸；无滚动条
向大家致敬，
我想将 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 + ")");
请指教。
qq_遁去的一_13回答
-
波斯汪
用于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
相关分类
Html5