为了拉伸SVG的内容以匹配SVG的尺寸，将值为none的preserveAspectRatio attribute添加到<svg>元素。注意，这种拉伸会扭曲图形。

figure {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid black;
}

svg {
  background: rgba(200, 255, 255, 0.9);
  height: 300px;
}

个字符

我建议你把SVG分成两部分。现在你需要在垂直部分上有一个“休息”，“不”，这将是一个很好的地方。这几乎是一个古老的学校滑动门技术，垂直线是高度，并在顶部被切断。
在代码片段中，你可以看到一个示例（无序列表）和下面我用作CSS背景的两个SVG。我跳过了“是”箭头。
在任何情况下：帮助自己绘制箭头作为一个路径与中风，而不是一个路径与填充！

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  width: 50px;
  height: 50px;
  padding-left: 100px;
  margin-left: -25px;
  position: relative;
}

li>div {
  display: flex;
  width: 50px;
  height: 50px;
  background-color: silver;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}

ul>ul {
  flex-direction: column;
}

ul.tree>ul:nth-of-type(1)>li:last-child {
  padding-top: 150px;
}

ul.tree>ul:nth-of-type(2)>li:last-child {
  padding-top: 70px;
}

li.down {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAyIDEwMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNDRUNDQ0MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgPGxpbmUgeDE9IjEiIHgyPSIxIiB5Mj0iODkwIi8+Cjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position:left bottom;
}

li.down:before {
  content: 'No';
  position: absolute;
  left: -10px;
  bottom: 20px;
  width: 110px;
  height: 80px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjQ0VDQ0NDIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogIDxwYXRoIGlkPSJTaGFwZSIgZD0ibSAxIDEgdiAyMCBhIDI0IDI0IDAgMCAwIDI0IDI0IGggNzQgbSAtNCAtNCBsIDQgNCBsIC00IDQiIGZpbGw9Im5vbmUiLz4KPC9zdmc+');
  background-repeat: no-repeat;
  background-position: 10px bottom;
}

个字符