kombiniert zwei Formen in eine Form über Svg

Question

ich bin ziemlich neu in Svg und wollte wissen, wie man diese Form zu erstellen. Es ist mir gelungen, eine einfache gepunktete Linie zu erstellen. Ich dachte, wenn es möglich wäre, 2 Formen zu erstellen und sie dann so zu positionieren, dass sie wie ein Ganzes aussehen. ORRR kann ich diese Form nur mit Svg machen?

<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

Es ist ein ziemlich großer Unterschied in der Komplexität zwischen zwei Formen auf dem jeweils anderen zu machen und tatsächlich die Formen zu kombinieren.

Das Rendern von ontop von einander ist so einfach, wie den Ursprung beider Formen auf den gleichen Punkt zu setzen und sie dann in einer beliebigen Reihenfolge zu rendern.

Bei der Kombination der Formen müssen Sie einige Regeln für die Kombination oder Zusammenführung festlegen. Möchten Sie beispielsweise einfach alle Punkte nehmen, die Form A definieren, und sie an die Menge der Punkte anhängen, die Form B definieren? Hinweis; wahrscheinlich nicht, weil Sie dann höchstwahrscheinlich mit kreuzenden Linien enden werden (ähnlich wie wenn Sie sie gerade übereinander gelegt hätten). Stattdessen sollten Sie eine Art Schnittpunkt suchen, um den resultierenden Bereich zu finden und dann die resultierende Form anhand der Punkte definieren, die diesen Bereich definieren (sehen Sie sich zunächst https://en.wikipedia.org/wiki/Boolean_operations_on_polygons an).

Answer 2

Sie sind auf dem richtigen Weg. Sie müssen nur eine zusätzliche Zeile für den horizontalen Abschnitt hinzufügen.

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