선 그래프 용 SVG 배율

Question

선형 차트 용으로 반응 형 SVG를 갖고 싶습니다. 고정 요소와 확장 요소를 결합하는 세 영역이 있어야합니다.

핑크 요소는 텍스트 때문에, 계조 비트 축선을 그리기 위해 사용되는 (I 아이는 폴리 라인을 그리기위한 좌표 시스템을 정의 할 필요가있다), 및 제한된 스케일링 있어야 스케일링 자식 SVG이어야 relativaly 간단한 글꼴로 렌더링해야합니다.

마지막으로 JavaScript없이 이것을하고 싶습니다.

---

솔루션으로 도움이 될 수 있습니다 내가 직면 한 문제 중 일부

가 :

1. 나는 x="20px" width="calc(100% - 20px)" height="calc(100% - 20px)"을 다음 분홍색 영역 인 <svg> 요소를 줄 수 있다면, 이것은 크게 내 문제를 해결할 것 ,이 경우 구문 분석 오류가 트리거됩니다. 나는 CSS를 사용하여 어떤 변화도 얻지 못했다.

Answer 1

(다른 사람이 "순수한"svg로 이것을 할 수 있다면 또 다른 대답이 될 것입니다).

HTML 레이아웃과 여러 SVG를 사용하여 해킹했습니다.

<div style="width: 100%; height: 300px"> 
 
    <!-- The Y axis --> 
 
    <svg style="width: 40px; height: calc(100% - 20px); float: left;"> 
 
    <g class="yaxis"> 
 
     <line x1="99%" x2="99%" y1="0%" y2="100%" stroke="black" vector-effect="non-scaling-stroke"></line> 
 
     <g class="tick tick-yaxis"> 
 
     <text x="99%" y="100%" text-anchor="end">$0.0</text> 
 
     <line x1="98%" x2="100%" y1="100%" y2="100%" stroke="black"></line> 
 
     </g> 
 
     <!-- ... --> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
    <!-- The actual chart --> 
 
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: calc(100% - 40px); height: calc(100% - 20px); float: left;"> 
 
    <polyline points="0,50 45.46574414322495,0 65,100 75,100 89.52839708894965,0 91.10141646672459,100 98.21939424857649,0 100,100" 
 
    vector-effect="non-scaling-stroke" stroke="red" fill="none"></polyline> 
 
    </svg> 
 
    <!-- x axis --> 
 
    <svg style="clear: both; margin-left: 40px; width: calc(100% - 40px); height: 20px;"> 
 
    <g class="xaxis"> 
 
     <line x1="0%" x2="100%" y1="1%" y2="1%" stroke="black" vector-effect="non-scaling-stroke"></line> 
 
     <g class="tick tick-xaxis"> 
 
     <text x="5%" y="100%" text-anchor="middle">28 Feb 2011</text> 
 
     <line x1="5%" x2="5%" y1="94%" y2="96%" stroke="black"></line> 
 
     </g> 
 
    </svg> 
 
</div>

: 이것은 내가 사용하고있는 코드입니다