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并用作我的图形的容器。

我已将其用作资源，更具体地说，是亚当的答案：Resize svg when window is resized in d3.js，但它对我没有用。 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 个答案: