レスポンシブSVGチャートのCSSソリューション（ポリライン座標）

Question

私は、javacriptを使用して、線グラフ内の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/