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

【问题标题】：How to merge curve and line shape together in svg path如何在svg路径中将曲线和线条形状合并在一起
【发布时间】：2019-04-28 08:47:23
【问题描述】：

我在 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>

【问题讨论】：

标签： html css svg path css-shapes

【解决方案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>

【讨论】：

enxaneta。 thanx 兄弟，我在没有 M 的情况下做到了这一点，但我没有添加最后两个数字，即 14 10，这就是为什么它不适用于我。不管怎样，再次感谢

【解决方案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);
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

特曼尼阿菲。 w0w 你刚刚让我很惊讶。我花了 3 天时间学习 SVG 来实现这个形状，它就在 CSS 中。你能给我一些关于如何使用这个技巧的链接吗？将不胜感激，谢谢兄弟。
@KinanAlamdar 基本上你有 2 件事 1) 径向渐变允许你有洞，因为我只是创建了一个以透明开始并以颜色结束的圆形渐变 (developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient) 2)那么阴影滤镜就像 box-shadow 但它会在不透明部分周围绘制阴影，它适用于任何类型的形状 (developer.mozilla.org/en-US/docs/Web/CSS/filter-function/…)