通过svg将两种形状合并为一种形状

对于SVG来说，这是个相当新颖的东西，并且想知道如何创建这种形状。我设法创建了一条简单的虚线。我在想如果有可能创造2个形状，然后定位它们使其看起来像一个整体。 ORRR可以使用svg制作这个形状吗？通过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>

来源

2017-06-29 Umar

有复杂彼此的顶部呈现两种形状和实际相结合的形状之间相当大的差异。

渲染彼此的ontop与将两个形状的原点设置为相同点然后以某种任意顺序渲染它们一样简单。

组合这些形状将需要您提出关于如何执行组合或合并操作的一些规则。例如，你是否想简单地取所有定义形状A的点并将它们追加到定义形状B的点集合？暗示;可能不会像你那么很可能只是以十字交叉的线条结束（就好像你只是把它们放在彼此之上一样）。相反，您需要查看某种交叉点以找到生成的区域，然后从定义该区域的点中定义生成的形状（请参阅https://en.wikipedia.org/wiki/Boolean_operations_on_polygons开始）。

来源

2017-06-29 14:46:45

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

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

来源

2017-06-29 15:54:44

通过svg将两种形状合并为一种形状

回答

相关问题