向大家致敬，我想將 SVG 繪圖適合任何屏幕尺寸，而不產(chǎn)生滾動條。我怎樣才能這樣做呢？請解釋是否可以根據(jù)屏幕尺寸自動調(diào)整/縮放。例如，我希望 svg/整個頁面的內(nèi)容完全適合任何屏幕（縮小或擴大），沒有滾動條。以下是我的CSS：body, html { height: 100%; width: 100% margin: 0; font-family: Arial;}////////// 這是一個相關(guān)的塊。保護代碼中的數(shù)據(jù) <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條經(jīng)驗 獲得超4個贊
用于100vh高度和100vw寬度，而不是%在body, html 示例中：
body, html {
height: 100vh;
width: 100vw;
margin: 0;
}
并且不要在<svg>標(biāo)簽中設(shè)置高度和寬度，而是使用以下命令：
svg {
max-height: 100vh;
max-width: 100vw;
height: 100%;
width: 100%;
}
之后你<svg>將覆蓋整個窗口。
動漫人物
TA貢獻1815條經(jīng)驗 獲得超10個贊
嘗試將 svg 的高度和寬度分別設(shè)置為 100VH 和 100VW：
CSS：
svg{
height: 100vh;
width: 100vw;
}
躍然一笑
TA貢獻1826條經(jīng)驗 獲得超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 關(guān)注
- 222 瀏覽
添加回答
舉報
0/150
提交
取消