반응 형 SVG 차트 용 CSS 솔루션 (폴리 라인 좌표)

Question

자바 스크립트를 사용하여 꺾은 선형 차트 내에 polyline 요소의 좌표를 생성하고 있습니다. 차트는 고정 된 높이 (210px)와 응답 가능한 너비 (항상 부모 div의 100%)를 가져야합니다.

문제는 창의 크기를 조정할 때 폴리 라인의 점 좌표가 변경되지 않는다는 것입니다.

polyline의 좌표를 부모의 백분율로 설정하여 div으로 설정하여 창 크기를 변경할 때 가로 좌표가 변경되지 않습니까?

자바 스크립트를 사용하여 크기 조정을 수신하고 폴리 라인 포인트 좌표를 다시 계산할 수 있지만 경미하고 과도한 것처럼 보이므로 가볍고 순수한 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/