私は SVG にまったく慣れていないので、ご容赦ください。私はこのテーマに関する多くの記事を読みましたが、誰もが d3.js のようなソリューションを指摘しています。私の意見では、これは私が抱えている単純なタスクを複雑にする方法です。
(0,0) が左下隅にあるデカルト座標系でグラフを作成する必要があります。幅、高さ、およびデータをパーセンテージで表す必要があるため、すべてがページに合わせてスケーリングされます。
だから、ここに私のコードがあります（物事を簡単にするために、グラフの一部だけがそこにあります）：
<style>
.grid {stroke: white; stroke-width: 1; stroke-dasharray: 1 2}
.label{font-family: courier new; fill: white; font-size: 14px}
.data {stroke: white; stroke-width: 1}
</style>
<svg width="100%" height="100%">
<g class="x grid">
<line x1="0%" x2="0%" y1="80%" y2="100%"></line>
<line x1="10%" x2="10%" y1="80%" y2="100%"></line>
<line x1="20%" x2="20%" y1="80%" y2="100%"></line>
</g>
<g class="y grid">
<line x1="0%" x2="20%" y1="80%" y2="80%" ></line>
<line x1="0%" x2="20%" y1="90%" y2="90%" ></line>
<line x1="0%" x2="20%" y1="100%" y2="100%"></line>
</g>
<g class="x label">
<text x="10%" y="100%"> 1 minute </text>
<text x="20%" y="100%"> 2 minutes</text>
</g>
<g class="y label">
<text x="0%" y="80%"> 20% </text>
<text x="0%" y="90%"> 10% </text>
</g>
<g class="data">
<line x1="0%" x2="10%" y1="85%" y2="92%" ></line>
<line x1="10%" x2="20%" y1="92%" y2="88%" ></line>
</g>
</svg>
polygonデータにandを使用したかったpathので、曲線の下の領域を埋めることができましたが、パーセンテージを値として好きではありません。誰かがviewboxパーセンテージをピクセルに変換してからピクセルを使用することを提案しましたが、それは私のグリッドを台無しにします。また、左下隅に (0,0) を配置して、CGI が表示する必要があるすべてのポイントで計算を行う必要がないようにします。試してみtransform="translate(0,100) scale(1,-1)"ましたが、パーセンテージでは機能しません。私も試しtransform="rotate(270)"ましたが、ウィンドウの幅を減らすと、グラフの高さが減ります...
それで、誰かがここで私をキックスタートさせて、左下隅に原点があり、曲線の下に色付きの領域がある流動的でサイズ変更可能なグラフを設定するのを手伝ってくれませんか?