ポリラインsvg開始点の幅が他の点よりも異なる

Question

開始点と他の点でストローク幅が異なる理由。何か案は。以下のコードを参照してください。

<svg> 
 
     <polyline points="10 0, 30 0,10 10,30 10" fill="none" stroke-width="2px" stroke="#19af5c"></polyline> 
 
    </svg>

私は他のポイントのポリラインを複製することによって達成する必要はありません。すなわち、各点は異なるポリライン/線要素を有する

Answer 1

これは、SVGでのストロークの仕組みによるものです。それは半分と半分のように行われます。すなわち、ストロークは0から1の半分で、残りの半分は-1から0です（あなたが私が意味するものを得るならば）ので、より薄いストロークが見えます。

Stroke section in this MDN pageを参照して、私の言いたいことを確認できます。あなたは同じストローク幅を見ることが10,1と30,1とポイントを作る場合

ストロークはパス

を中心に描かれて次のように彼らはそれを入れています。これは、ストロークがY軸上で0〜2の範囲にあることです（ストロークの半分がポイントの上にあり、半分が下にあります）。

<svg> 
 
    <polyline points="10 1, 30 1,10 10,30 10" fill="none" stroke-width="2px" stroke="#19af5c"></polyline> 
 
</svg>