ポリゴンで「塗りつぶし」を使用する以外に、4 点間の領域に色を付ける方法はありますか? 4本の線を使用して多角形を描画しました。
<line x1="0" y1="0" x2="300" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="300" y1="0" x2="300" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="300" y1="150" x2="0" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="0" y1="150" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>
これらの線の間の領域に色を付けたいと思います。
いいえ、実際には形が満たされていないので、ありません。たまたま出会う4つのラインがあります。
これには、 a を使用するrect方が良いオプションです。
<rect x="0" y="0" width="300" height="150" fill="pink"/>
または、4 つの独立した線を作成する代わりに、ポリラインを使用してそれに塗りつぶしを追加することもできます。
<polyline points="0,0 300,0 300,150 0,150 0,0"
style="fill: pink; stroke:red; stroke-width: 1"/>
多角形、ポリライン (または類似のもの)、および塗りつぶしを使用しない他の唯一の方法は、幅の広いストロークで 1 つの線を作成することです。
<line x1="0" y1="75" x2="300" y2="75" style="stroke:red ;stroke-width:150"></line>
これは、塗りが線と同じ色になることを前提としています。ストロークは線/シェイプの内側と外側の半分であるため、目的の開始点とストロークの幅の間の距離の半分になるように線の座標を設定する必要があります。ここでは、ストロークは 150 で、0 から開始したいので、y1 と y2 ポイントは 75 に設定されています。