通過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將兩種形狀合併爲一種形狀

回答

相關問題