SVG Scaling for Line Chart

Question

Я бы хотел иметь отзывчивый SVG для линейной диаграммы. Это должно иметь три области, которые объединяют фиксированные и масштабируемые элементы.

розовый элемент должен быть масштабирование ребенок SVG (мне нужно определить ребенок системы координат для рисования ломаной линии), серые биты используются для рисования оси, и должен иметь ограниченный масштаб, так как текст должен отображать в релятививно простой шрифт.

Наконец, я хотел бы сделать это без JavaScript.

---

Некоторые из проблем, я столкнулся, и которые могли бы помочь с решением:

1. Если бы я мог дать <svg> элемента, розовая область следующей x="20px" width="calc(100% - 20px)" height="calc(100% - 20px)", это будет в значительной степени решить мою проблему , но это вызывает ошибку синтаксического анализа. Мне не удалось получить какие-либо вариации с помощью 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>