如何使SVG容器窗口響應？

Question

我試圖使我的SVG對不同的Windows更加敏感，並且在我的文檔中沒有找到適合我的SVG。 如何使我的設計更具響應性？

這就是我的HTML的結構：

<body>
    <div id="toggle"></div>
    <div id="zoomArea">
        <button type="button" class="btn btn-secondary" id="reset">Reset</button>
    </div>
    <div id="container">
        <div id="tree"></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>

這是我的腳本：

let svg = d3.select("#tree")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom + additionalHeight)
let g = svg.append("g")
.attr("transform", "translate(" + margin.right + "," + margin.top + ")")

SVG將附加到tree div並用作我的圖的容器。

我將其用作資源，更具體地說，是亞當的答案：在d3.js中調整窗口大小時，調整svg的大小，但對我而言不起作用。 SVG根本沒有調整大小。

Answer 1

您可以在svg標簽中使用'viewBox'屬性來使svg響應，這是可縮放矢量圖形中的可縮放比例。 將“ viewBox”屬性設置為與svg相同的高度和寬度將確保所有svg可見。

 <svg viewBox='0 0 400 600' width='600' height='400'>

如果您想了解更多信息，可以在這里找到有關“ viewBox”和其他svg屬性的有用文章。 svg-viewBox

如何使SVG容器窗口響應？

問題描述

1 個解決方案

解決方案1
0 2019-01-04 11:32:32

如何使SVG容器窗口響應？

問題描述

1 個解決方案

解決方案1 0 2019-01-04 11:32:32

解決方案1
0 2019-01-04 11:32:32