用於響應SVG圖表（多段線座標）的css解決方案

我正在使用javascript在折線圖內生成polyline元素的點座標。圖表必須具有固定高度（210px）和響應寬度（始終爲其父div的100%）。用於響應SVG圖表（多段線座標）的css解決方案

問題是在調整窗口大小時，折線的點座標不會改變。

有沒有辦法將polyline的座標設置爲其父級的百分比div，以便在調整窗口大小時水平座標發生變化？

我知道我可以使用JavaScript來偵聽窗口大小並重新計算多段線的點座標，但似乎有點矯枉過正，所以我希望有一個更輕，純粹的CSS解決方案。

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

來源

2017-04-11 Hal_9100

不知道你想要什麼。您是否在svg元素上嘗試過viewBox =「0 0 350 210」？ –

你需要一個viewBox添加到您的SVG。如果您想要圖形水平拉伸，以適應該框，那麼您還需要添加合適的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/

來源

2017-04-11 13:15:19

用於響應SVG圖表（多段線座標）的css解決方案

回答

相關問題