如何使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