如何使SVG容器窗口响应？

Question

I am trying to make my SVG more responsive to different Windows and I did not see much in the documentation for it that works for me. 我试图使我的SVG对不同的Windows更加敏感，并且在我的文档中没有找到适合我的SVG。 How do I make my design more responsive? 如何使我的设计更具响应性？

This is how my HTML structured: 这就是我的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>

Here is my script: 这是我的脚本：

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 will be appended to the tree div and serve as the container for my graph. SVG将附加到tree div并用作我的图的容器。

I have used this as a resource, more specifically, Adam's answer: Resize svg when window is resized in d3.js but it didn't work for me. 我将其用作资源，更具体地说，是亚当的答案：在d3.js中调整窗口大小时，调整svg的大小，但对我而言不起作用。 The SVG did not resize at all. SVG根本没有调整大小。

Answer 1

You can use the 'viewBox' attribute in your svg tag to make the svg responsive, it is the scalable in Scalable Vector Graphic. 您可以在svg标签中使用'viewBox'属性来使svg响应，这是可缩放矢量图形中的可缩放比例。 Setting the 'viewBox' attribute to the same height and width as the svg will ensure that all of the svg is visable. 将“ viewBox”属性设置为与svg相同的高度和宽度将确保所有svg可见。

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

There is a useful article about 'viewBox' and other svg attributes here if you want to know more. 如果您想了解更多信息，可以在这里找到有关“ viewBox”和其他svg属性的有用文章。 svg-viewBox 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