Verbinden Sie zwei SVG-Pfadelemente programmatisch
Ich rende eine Map aus SVG-Pfaden (mit jVectormap ).
Es gibt Fälle, in denen eine Region mit der benachbarten Region verschmolzen werden muss.
Leider berühren sich beide Regionen nicht und ich muss interpolieren, um den Raum dazwischen zu füllen.
jVectormap verwendet sehr einfache SVG-Pfade mit M , um den absoluten Startpunkt und l zum Verbinden relativer Punkte festzulegen.
Entspricht eine der SVG-Bibliotheken einem solchen Vorgang?
2 Antworten
Ich habe das nicht versucht, aber Sie können es umgehen, indem Sie den Konverter bei jVectormap mit dem folgenden ausführen Parameter:
%Vor% Dabei sind region_1 und region_2 die beiden Regionen, die Sie zusammenführen müssen.
Das Lösen des Problems auf diese Weise bedeutet auch, dass die generierten SVG-Pfade den ursprünglichen Koordinaten entsprechen, während eine folgende Korrektur zu (wahrscheinlich kleineren) Inkonsistenzen führen kann.
Dies ist möglicherweise nicht die Art von Antwort, nach der Sie suchen, aber mit Raphael.js können Sie die gesamte Länge des Pfads einer Region durchlaufen getPointAtLength() , vergleicht es mit allen Punkten der zweiten Region. Wenn die Koordinaten näher als n Pixel von irgendwelchen Koordinaten auf der zweiten Region sind und die vorherigen Koordinaten nicht waren, dann könnte dies als ein "Klebepunkt" betrachtet werden. Sie würden dann zum zweiten Regio springen und anfangen, darüber zu schleifen, wenn der nächste Punkt noch näher als n -Punkte ist, als in die entgegengesetzte Richtung gehen, wenn noch näher Änderungsrichtung und weiter entlang des Pfades gehen, bis Sie einen Punkt finden weiter entfernt von der ursprünglichen Region als n Pixel. Schleifen Sie weiter in diese Richtung, bis Sie wieder einen neuen "Klebepunkt" finden, wo Sie wieder auf die beschriebene Weise in die ursprüngliche Region wechseln und alle Punkte, die in dieser letzten Schleife nicht abgedeckt waren, könnten verworfen werden (oder Sie könnten einfach Erstellen Sie eine neue Form basierend auf den Punkten, über die Sie gestoßen sind, während Sie die Länge der ursprünglichen Region überstreichen.
Wahrlich, es ist nicht das einfachste Skript, aber es sollte ziemlich machbar sein, besonders wenn man eine Funktion wie getPointAtLength verwenden kann, um die Punkte zwischen den definierten SVG-Punkten zu finden (obwohl das nötig ist) nur "notieren" die definierten Punkte, und das ist eine Art harter Pfad, da Raphael.js keine aufregenden Funktionen hat, die dabei helfen würden, aber selbst das sollte nicht allzu schwer mit Hand
Tags und Links javascript jquery svg