Beseitigen Sie dünne weiße Linien zwischen Form-'Verbindungen'

Ich habe in Adobe Illustrator ein Symbol aus einfachen Linien/Formen erstellt und es dann zu einer festen, kontinuierlichen Form gemacht.

Ich möchte dieses Symbol als Pre-Loader auf einer Website verwenden, wobei die Idee darin besteht, dass jedes „Segment“ einzeln ein-/ausgeblendet wird. Um dies zu tun, habe ich die feste Form in Scheiben geschnitten, damit ich jeden Abschnitt einzeln animieren kann. Ich habe dies getan, aber es gibt dünne weiße Linien zwischen einigen der Formen (Bild angehängt). Ich habe die Verbindungen überprüft und ich glaube nicht, dass ich die Formen näher zusammenbringen könnte! Die Koordinaten/Punkte scheinen auch genau gleich zu sein.

Sie können sehen, was im Bild unten passiert:

Geben Sie hier die Bildbeschreibung ein

Gibt es eine Möglichkeit, dies zu umgehen? Es wird sich wirklich auf die Qualität/Schärfe des Symbols auswirken. Ich schätze, ich sollte das irgendwie beheben können, da ich viele komplexere Formen gesehen habe, die keine sichtbaren "Verbindungen" haben.

Hier ist die Quelle für die SVGs, mit denen ich arbeite:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 249 351.5" enable-background="new 0 0 249 351.5" xml:space="preserve">
        <path d="M0,0l39,39.9v84.8l85,84.9v57L0,141.8V0z"/>
        <path d="M124,124.8v57L39,96.9v-57L124,124.8z"/>
        <path d="M124,124.8L249,0v57L124,181.8V124.8z"/>
        <path d="M209,96.9L249,57v169.7L124,351.5v-57l85-84.9V96.9z"/>
        <path d="M124,351.5L0,226.7v-57l124,124.8V351.5z"/>
</svg>

Auch der Codepen, wo Sie das Symbol auf einer Webseite sehen können:

http://codepen.io/moy/pen/yyvVZm

Und wie es animiert (damit Sie sehen können, warum ich die Form aufgebrochen habe):

http://codepen.io/anon/pen/xbYmRJ

Nochmals vielen Dank, hoffe jemand kann helfen!

Verschmelzen Sie Formen zu einem durchgehenden Pfad und animieren Sie einen gestrichelten Strich darüber. Es ist eine Art Rendering-Artefakt, bei dem die Rendering-Engine nicht neu geschrieben werden kann. (Die Rendering-Engine basiert nicht auf Stichproben, sondern auf Annahmen darüber, wie sich die Polygone verbinden, was in bestimmten Situationen eine schlechte Wette ist.)
Wenn Sie alle Anker vertikal auswählen und verwenden Object > Path > Averageund ankreuzen Verticalund drücken, OKist es besser? @joojaa hat Recht, dass es sich um ein Problem beim Rendern auf dem Bildschirm handelt. Normalerweise zeigen Ausdrucke den Haaransatz nicht und beim Speichern als Raster mit Art OptimizedAnti-Aliasing-Einstellungen wird er normalerweise ebenfalls entfernt. Wenn es jedoch in SVG angezeigt wird, müssen Sie möglicherweise die Verknüpfungen überdenken.
Sie könnten einen ähnlichen Ansatz wie den in dieser Antwort vorgeschlagenen anpassen .
Danke für die Antworten. Ich habe es versucht Object > Path > Average > Vertical, aber es schien keinen Unterschied zu machen. Ich glaube nicht, dass ich ein SVG mit speichern kann Art Optimised? Ich habe mir die Joins von @Scott angesehen und sie scheinen in Ordnung zu sein . Die 5 diagonalen Linien haben alle die gleiche Form, nur dupliziert und neu positioniert - sie sollten also konsistent sein. Wenn ich hineinzoome, sehe ich, dass alle flachen Verbindungen zu 100 % flach sind, keine Unebenheiten oder ähnliches. Irgendwelche anderen Ideen, um die Verbindungen zu überdenken? Nochmals vielen Dank - Steve
Sehen Sie sich diese Frage auf GDSE an: graphicdesign.stackexchange.com/questions/15475/… . Es sollte helfen.

Antworten (1)

Hier ist eine Idee:

Was wäre, wenn Sie Segmente inkrementell in Ebenen laden würden, wobei jede Ebene als ein einzelner Pfad definiert wäre? 1. Segment 1
laden 2. Segmente 1 & 2 auf Segment 1 laden
3. ...

(Wenn Sie die SVG-Quelle gepostet haben, würde dies helfen, die Frage zu beantworten.)

AKTUALISIEREN:

Hier ist ein Link, der nützlich sein könnte: http://css-tricks.com/animating-svg-css/ . Achten Sie besonders auf das Beispiel. Hier ist es in CodePen, wo Sie den Code optimieren können: http://codepen.io/chriscoyier/pen/dvjhn

Beachten Sie, dass es keine Objekte gibt, sondern nur Pfade.

AFAIK, Pfade sind der einzig sichere Weg, um die Lücken zu vermeiden. Verschwenden Sie keine Mühe, dies mit Objekten zu versuchen. Sie werden denken, dass Sie das Problem behoben haben, aber wenn Sie das Bild vergrößern oder verkleinern, werden die Lücken wieder angezeigt.

Wieso den? Denn obwohl eine skalierbare Vektorgrafik ein mathematisch definiertes Bild ist, das bei unterschiedlichen Auflösungen gleich aussieht, versteht die Anzeigehardware nur Pixel, die wie die Quadrate auf Millimeterpapier ausgerichtet sind.

Um zu sehen, was ich meine, versuchen Sie, eines Ihrer Bilder langsam nach oben und unten zu skalieren. Bei bestimmten Größen verschwinden die äußeren vertikalen Lücken zwischen den Objekten (2 links und 1 rechts). Hier richten sich die Kanten der Objekte am Pixelraster des Displays aus. (Die vertikalen Lücken in der Mitte scheinen jedoch ein Konstruktionsfehler zu sein.)

Lücken (oder Überlappungen) zwischen diagonalen (oder gekrümmten) Kanten von Objekten werden jedoch immer vorhanden sein, da die zugrunde liegende Gitterstruktur der Anzeige keine Kante außer einer horizontalen oder vertikalen Kante richtig anzeigen kann.

Die Lösung: Erstellen Sie keine separaten polygonalen Objekte und erwarten Sie, dass sie nahtlos verbunden werden; Erstellen Sie Pfade , die alle Polygone innerhalb einer einzigen Definition umfassen. Keine Kanten, keine Lücken.

SVG ist ein mächtiges Werkzeug und Pfade sind das Herzstück seiner Leistungsfähigkeit.

Ich hoffe, dass diese Antwort hilft zu verdeutlichen, was @joojaa in seiner Antwort gesagt hat, und dass die Links, die ich aufgelistet habe, Ihnen helfen, das gewünschte Ergebnis zu erzielen.

Wenn Sie weitere Fragen haben, werde ich versuchen, sie in diesem Forum zu beantworten, oder Sie können mir eine E-Mail senden (klicken Sie auf meinen Benutzernamen, um die Adresse zu sehen) .
UPDATE - 30. Januar 2015: Hoppla, das ist nicht erlaubt.

NEUES UPDATE:

Nachdem ich mit all dem Gelaber über Pfade fertig war, bin ich auf diesen Link gestoßen, der alles, was ich gesagt habe, Lügen zu strafen scheint: snapsvg.io/demos/#mascot (Mein Level in diesem Forum ist zu niedrig, um einen dritten Link zu posten eine Antwort, also müssen Sie den Link kopieren und in Ihren Browser einfügen.)

Ich habe nicht die Energie, es zu untersuchen, aber es scheint zu erreichen, was Sie zu tun scheinen. Ich bleibe bei Pfaden; Ich verstehe sie.

VIEL GLÜCK

Kein Problem, ich poste die Quelle, die ich habe. Ich denke, ich muss es als Antwort posten - hoffe, das ist in Ordnung!
UPDATE: Ich habe gerade festgestellt, dass ich meine Antwort bearbeiten kann, Sie können den SVG-Code dort sehen. Vielen Dank!
Danke vielmals! Ich bin ziemlich glücklich, stattdessen Pfade zu verwenden, wenn es das erreicht, wonach ich suche! Dieser Snapsvg-Link, den Sie gepostet haben, kommt dem, was ich versuche, sehr, sehr nahe. Ich würde, wenn das verwendete Javascript bei der Positionierung ein wenig hilft. Trotzdem danke für die erneute Antwort, ich werde dies vorgeben, indem ich die Polygone für Pfade ändere! :)
Was wäre der beste Ansatz, um meine Polygone in Pfade umzuwandeln? Ich wollte Ihnen eine kurze E-Mail schreiben, aber ich konnte die Adresse nicht sehen.
Beseitigen Sie dünne weiße Linien zwischen Form-'Verbindungen'
AntwortenHierDatenschutz-Bestimmungen1y, 0v