svg路径中的垂直线不显示

Question

我尝试了一些基本的svg动画，而且我无法使用绘制简单的多边形。由于某种原因，我的形状的垂直线不显示。

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是我得到的结果：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>