svgパスの垂直線が表示されない

Question

基本的なsvgアニメーションを試していますが、単純なポリゴンを描画するのに問題があります。何らかの理由で、私の形の縦線が表示されません。

は、ここに私のコードです：

.path { 
 
    fill: red; 
 
    stroke: black; 
 
    stroke-width: 5px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <path class="path" d="M160,60 L-160,60 l0,-60 z"> 
 
</svg>

そして、ここで私が得ていた結果だ：私はここで間違ってやっている何bad shape

？前もって感謝します。

Answer 1

ラインがビューポートの外にあります。 viewBox属性値を変更するか、図形を右に置き換えることができます。以下の作業例を参照してください。

.path { 
 
    fill: red; 
 
    stroke: black; 
 
    stroke-width: 5px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-200 -10 400 80"> 
 
    <path class="path" d="M160,60 L-160,60 l0,-60 z"/> 
 
</svg>