Question

我使用javascript生成折线图中polyline元素的点坐标。图表必须具有固定的高度（210px）和响应宽度（始终为其父div的100%）。

问题是在调整窗口大小时，折线的点坐标不会改变。

有没有办法将polyline的坐标设置为其父div的百分比，以便在调整窗口大小时水平坐标会发生变化？

我知道我可以使用javascript来监听窗口调整大小并重新计算折线的点坐标，但它看起来有点矫枉过正，所以我希望有一个更轻，纯CSS的解决方案。

小提琴：https://jsfiddle.net/Hal_9100/1cnq389g/

Answer 1

您需要在SVG中添加viewBox。如果您希望图表水平拉伸以适合框，那么您还需要添加合适的preserveAspectRatio值。

* {padding: 0; margin: 0;}

#container {
    width: 60%; height: 210px;
    background: #fff;
}
svg {
    width: 100%; height: 210px;
    position: relative;
    border: 2px solid black;
}

<div id="container">
    <svg viewBox="0 0 450 210" preserveAspectRatio="none">
        <polyline id="myLine" fill="none" stroke="#2681DC" stroke-width="2" points="0,210 50,67 100,174 150,198 200,202 250,190 300,205 350,207 400,198 450,19 "></polyline>
    </svg>
</div>

https://jsfiddle.net/1cnq389g/2/

响应式SVG图表的css解决方案（折线坐标）

1 个答案: