CSS-Lösung für reaktionsfähiges SVG-Diagramm (Polyline-Koordinaten)

Question

Ich benutze Javascript, um die Punkte Koordinaten eines polyline Elements in einem Liniendiagramm zu generieren. Das Diagramm muss eine feste Höhe (210px) und eine responsive Breite (immer 100% seines übergeordneten Div) haben.

Problem ist, dass sich die Punktkoordinaten der Polylinie beim Ändern der Fenstergröße nicht ändern.

Gibt es eine Möglichkeit, die Koordinaten der polyline als Prozentsatz der übergeordneten div so festzulegen, dass die horizontalen Koordinaten ändern, wenn die Größe des Fensters ändert?

Ich weiß, ich könnte Javascript verwenden, um für Fenstergröße zu hören und die Punkte Koordinaten der Polylinie neu zu berechnen, aber es scheint etwas übertrieben, so dass ich gehofft hatte, gab es eine leichtere, reine CSS-Lösung.

Fiddle: https://jsfiddle.net/Hal_9100/1cnq389g/

Answer 1

Sie benötigen einen viewBox zu Ihrem SVG hinzuzufügen. Wenn das Diagramm horizontal ausgerichtet werden soll, um es an die Box anzupassen, müssen Sie auch einen geeigneten preserveAspectRatio-Wert hinzufügen.

* {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/