如何在SVG路径中将曲线和线形合并在一起

Question

我用HTML创建了SVG形状，并在其中创建了一条带有曲线的直线。问题是我不知道如何合并它们，我添加了Z闭合路径命令，但是它并不能合并形状，因为我想我进行了大量研究，但找不到解决方案。下面是我要实现的Shape的屏幕截图。

下面的形状是我所做的，这很好，但是我想合并所有路径。

SVG代码

<svg viewBox="0 0 100 100">
        <path stroke="blue" stroke-width=".7" fill="transparent" d="M14 10 H12 V35 H25 V10 H23 M14 10 C 14 17, 23 17, 23 10 " />
</svg>

Answer 1

如果需要CSS解决方案，可以尝试以下方法：

.box {
  width:100px;
  height:150px;
  background:radial-gradient(circle at top,transparent 13%,#f2f2f2 14%);
  border-radius:0 0 10px 10px;
  filter:drop-shadow(0 0 3px #000);
}

<div class="box"></div>

Answer 2

您只需要保留第一个M命令。我颠倒了最后一条曲线，因此您无需移回第一点。另外，我在d属性的末尾添加了一个z命令来关闭路径。

<svg viewBox="0 0 50 50">
        <path stroke="blue" stroke-width=".7" fill="transparent" 
              d="M14 10 
                 H12 
                 V35 
                 H25 
                 V10 
                 H23 
                 C 23 17, 14 17, 14 10 z" />

</svg>