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

Question

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

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

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

您只需要保留第一个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>

Answer 2

如果您想要 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>

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

How to merge curve and line shape together in svg path

html

css

svg

path

css-shapes

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

How to merge curve and line shape together in svg path

html

css

svg

path

css-shapes

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