私はあなたがこの<a href="https://jsfiddle.net/dagda1/e5o7hww1/" rel="nofollow noreferrer">fiddle</a>で見ることができる正三角形を作成しようとしていますSVGの三角形

Question

を作成します。

<svg xmlns="http://www.w3.org/2000/svg" 
    width="22" 
    height="22" 
    viewBox="0 0 22 22"> 
    <path d = "M0 0 L0 22 L20 11" stroke = "red" stroke-width = "3" fill = "red"/> 
</svg> 

私の思考は、私が（0、0）にペンを入れた後、（に線を引くということでした20、11）、三角形は正しく見えません。

Answer 1

あなたの三角形はで、ストロークはであり、ストロークは入力したパスポイントを超えています（ストロークはパスの中央に配置されているため）。これは、画像の端でストロークが途切れることを意味します。イメージを少し大きくしてみて、（0、0）で始まらないようにしてください。さらに、パスはが閉じたではないので、ストロークは3つの側面のうちの2つだけをカバーします（パスを閉じるだけでは、パスする必要はありません）。

次は、より多くのあなたが想定される三角形のようになります。また

<svg xmlns="http://www.w3.org/2000/svg" 
    width="28" 
    height="28" 
    viewBox="0 0 28 28"> 
    <path d = "M3 3 L3 25 L23 14 z" stroke = "red" stroke-width = "3" fill = "red"/> 
</svg> 

、脳卒中を取り除くと、あなたのビューボックスと座標を維持することができます。形状を少し大きくすることを除いて、ここには何も追加しません。