So kombinieren Sie zwei SVG-Pfade (ohne Leerzeichen)

Question

Ich konnte zwei separate Pfade zusammen using this technique zusammenführen. Meine Animation behandelt dies jedoch immer noch als zwei getrennte Pfade.

Gibt es eine Möglichkeit, diese beiden Pfade ohne Leerzeichen zu kombinieren?

svg { 
 
    fill: none; 
 
} 
 

 
path { 
 
    stroke: tomato; 
 
    stroke-width: 100; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623"> 
 
<path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3511.9" /> 
 
<path d="M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31" /> 
 
</svg>

Das Ziel ist, diese zu verschmelzen:

M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 
M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/> 

svg { 
 
    fill: none; 
 
} 
 

 
path { 
 
    stroke: tomato; 
 
    stroke-width: 100; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623"> 
 
<path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/> 
 
</svg>

Die ursprünglich getrennte Wege können hier sichtbar sein Pfade, die dem obigen SVG-Snippet entsprechen - ohne Leerzeichen im Pfad zu verwenden.

Answer 1

Die Antwort ist

M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31

H3511.9 bedeutet bei 3511,9 eine horizontale Linie, bis x Punkt ziehen (mit dem, was y zuvor geerbt wurde)

M3809.63,496.31 bedeutet die "Cursor" zu einer x bewegen , y-Koordinate.

I geändert H3511.9 zu H3809.63 und entfernt M3809.63,496.31 und weiterhin mit c21.41... die eine Ziehkurve Befehl ist. Diese Ressourcen haben mir geholfen, die Zeichenbefehle für das dpath Attribut zu verstehen.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

https://www.youtube.com/watch?v=k6TWzfLGAKo

Answer 2

Für diejenigen, die auf diese Frage kam, während Sie sicher, Wege aus der Verschmelzung keine Probleme würde es machen forschen, wie ich das Problem hier war, ist nur ein Tippfehler.

Im obigen zusammengeführten Snippet wurde die Endung des ersten Pfads von der ursprünglichen 23.41H3511.9 in 23.41H3809.63 geändert.

Wenn Pfade zusammengefügt werden, indem ein Leerzeichen eingefügt wird (oder kein Leerzeichen, nur kein Komma zwischen den Pfaden, wenn sie in den d-Attributwert gesetzt werden), sollte immer ohne Änderung funktionieren.

(Nebenbei bemerkt, Raphaels Antwort machte SVGs viel weniger kryptisch, nachdem er seine Links und Tipps gelesen hatte)