線圖的SVG縮放

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>