通过svg将两个形状组合成一个形状

Question

我对svg很新，想知道如何创建这个形状。香港专业教育学院设法创建一个简单的虚线。我在想是否有可能创建2个形状，然后定位它们使它看起来像一个整体。 ORRR我可以使用svg来制作这个形状吗？

<svg height="150px" viewBox="0 0 200 300">
                                <line
                                  x1="100" x2="100"
                                  y1="10" y2="300"
                                  stroke="#e6eaed"
                                  stroke-width="10"
                                  stroke-linecap="round"
                                  stroke-dasharray="1, 37" />
                                </svg>

Answer 1

你走在正确的轨道上。您只需要为水平部分添加一行。

<svg width="50" height="200">
  
  <g fill="none" stroke="black" stroke-width="6"
     stroke-linecap="round"
     stroke-dasharray="0 10">
    <line x1="40" y1="10" x2="40" y2="190"/>
    <line x1="10" y1="100" x2="40" y2="100"/>
  </g>

</svg>

Answer 2

将两个形状相互重叠并实际组合形状之间的复杂性存在很大差异。

互相渲染就像将两个形状的原点设置为相同点然后以任意顺序渲染一样简单。

组合形状需要您提供有关如何执行组合或合并操作的一些规则。例如，您是否想简单地获取定义形状A的所有点并将它们附加到定义形状B的点集中？暗示;可能不是因为你很可能最终会得到纵横交错的线条（就像你只是将它们叠加在一起一样）。相反，您想要查看某种交叉点以找到结果区域，然后从定义所述区域的点定义结果形状（查看https://en.wikipedia.org/wiki/Boolean_operations_on_polygons开始）。