如何在 svg 路径中​​将曲线和线条形状合并在一起

Question

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

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

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>