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

Question

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

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

有没有办法将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/