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

【问题标题】：css solution for responsive SVG chart (polyline coordinates)响应式SVG图表的css解决方案（折线坐标）
【发布时间】：2017-09-06 05:54:54
【问题描述】：

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

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

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

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

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

【问题讨论】：

不确定你想要什么。您是否在 svg 元素上尝试过 viewBox="0 0 350 210"？

标签： svg charts responsive polyline

【解决方案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/

【讨论】：