向大家致敬，我想将 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 回答
波斯汪
TA贡献1811条经验 获得超4个赞
用于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>将覆盖整个窗口。
跃然一笑
TA贡献1826条经验 获得超6个赞
;之后你错过了分号width: 100%;
body, html {
height: 100%;
width: 100%;
margin: 0;
font-family: Arial;
}
svg {
background-color: gray;
}
<svg width="100%" height="100%" ></svg>
- 3 回答
- 0 关注
- 154 浏览
添加回答
举报
0/150
提交
取消