Wie füge ich eine Stricheigenschaft hinzu oder animiere den Füllpfad einer SVG-Datei?

Ich habe eine Kombination aus Illustrator, Sketch, Inkscape und dem SVG-Editor von Peter Collingridge verwendet, um SVGs zu erstellen und zu manipulieren, aber ich bin auf ein paar Probleme gestoßen. Ich versuche, ein einfaches Logo mit Text zu erstellen, und wenn das Logo auf der Seite erscheint, möchte ich den Außenrand (mit einem Zeicheneffekt ) animieren und dann die Mitten mit einer Volltonfarbe füllen.

In Illustrator und Sketch habe ich mit einem einfachen Textfeld begonnen und die Ebene in Konturen konvertiert, aber meine exportierten SVGs enthalten nur einen einzigen Pfad ohne die Felder strokeund . stroke-widthEs sieht einfach so aus: <path fill="#FFF" d="…"/>, mit viel Markup im d=''Feld.

Ich habe gelesen und gelernt, dass Inkscape einige der saubersten SVGs exportiert, also ein PNG meiner Initialen importiert, „ein Bitmap-Bild nachgezeichnet“ und „die Gruppierung der Ebenen aufgehoben“ gemäß dieser Demo: youtube.com/watch?v=1cZk08x_rAI. Dadurch wurde ein Mehrpfad-Svg exportiert, aber jedem fehlten noch die Parameter strokeund stroke-width. Dies ist das, was ich bisher der Animation am nächsten gekommen bin: codepen.io/pcooney10/pen/PPvGrx , und es enthält auch den eigentlichen SVG-Code.

Ich habe ein paar Fragen, hoffentlich können mir hier einige helfen:

  1. Wie kann ich SVGs erstellen/exportieren, die stroke, stroke-width, stroke-dasharrayund stroke-dashoffsetFelder enthalten? Diese Parameter scheinen viele Animationsfunktionen freizuschalten.

  2. Wie kann ich ein abgeflachtes SVG erstellen, das die äußeren Ränder noch animiert? Es scheint, dass Pfade geschlossene Formen sein müssen, also hilft mir das, einen Sinn daraus zu machen, warum mein SVG aus 7 Ebenen besteht. Alle zusätzlichen Farben scheinen unnötig, aber wenn ich eine Ebene ausblende, sieht es komisch aus.

  3. Was ist im Allgemeinen das beste Tool zum Erstellen von SVGs? Es scheint, dass Inkscape den saubersten SVG-Code exportiert, aber es ist nicht so einfach zu manövrieren wie Sketch und Illustrator. Der SVG-Editor von Peter Collingridge scheint der beste zu sein, um den Code zu verschlanken, aber er entfernt nicht alle Stile, die Sketch und Illustrator in die Datei einbetten.

1. Möglicherweise möchten Sie vor dem Exportieren einen Strich auf Ihre Form setzen. zB Breite 1px, Farbe rot. Bei Vektorformen haben Sie immer die Möglichkeit, Strich- und Füllfarbe separat festzulegen. 3. Sie können den Inkscape-Export als letzten Schritt verwenden und Ihre Form in einem anderen Tool entwerfen. Mein persönlicher Favorit ist im Moment Affinity Designer für den Export, da er zusätzliche Optionen bietet, wie z. B. das Reduzieren von Transformationen. Es gibt auch ein Befehlszeilentool zur Optimierung namens svgo ( github.com/svg/svgo ).
@AAGD danke. Nachdem ich diese Frage gepostet hatte, habe ich herausgefunden, wie ich die Stroke-Eigenschaft in Illustrator hinzufügen kann. Ich habe das Gefühl, dass alle Pfade ein Strichelement haben können - auch wenn sie nicht in der Originaldatei definiert sind. Für Formen, die ich nicht wirklich umranden wollte, aber den Umrisseffekt haben wollte, fügte ich 0,1 Pixel zur Strichbreite hinzu und konnte die Zeichenanimation zum Laufen bringen

Antworten (1)

  1. Wie kann ich SVGs erstellen/exportieren, die stroke, stroke-width, stroke-dasharrayund stroke-dashoffsetFelder enthalten?

Mit Inkscape ist das ganz einfach:

Schaffen

  • Strich : Zeichnen oder importieren Sie Ihr Objekt, wählen Sie das Objekt aus und wählen Sie dann einfach eine Farbe aus der Palette aus, während Sie die Maustaste gedrückt halten, Shiftoder legen Sie den Strich direkt im Menü "Füllung und Strich" ( Shift+Ctrl+F) fest. Die Standardstrichbreite beträgt 1px .

  • Strichbreite : Passen Sie die Strichbreite im Menü "Füllung und Strich" nach Ihren Wünschen an.

  • Stroke-Dasharray : Wählen Sie ein Muster, das Ihnen gefällt, aus der Dropdown-Liste "Dashes" oder erstellen Sie Ihr eigenes Muster, indem Sie "Benutzerdefiniert" auswählen.

  • Stroke-Dashoffset : Passen Sie die Zahl neben dem Dropdown nach Ihren Wünschen an. Sie werden sehen, wie die Striche um die Form wandern.

Export

  • Klicken Sie auf „Datei“ > „Speichern“ und wählen Sie „Plain SVG“ als Format. Die resultierende Datei ist eine saubere SVG-Darstellung mit den gesuchten Eigenschaften.

Beispiel

Speichern Sie diese drei Formen

als einfaches SVG gibt Ihnen:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg197572"
   viewBox="0 0 840.00001 280"
   height="280"
   width="840">
  <defs
     id="defs197574" />
  <metadata
     id="metadata197577">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(87.913618,-29.053558)"
     id="layer1">
    <g
       transform="translate(-5.1968614,1.7322813)"
       id="g198176">
      <path
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:15.99999952, 7.99999977;stroke-dashoffset:24;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
         id="path198120"
         d="m 660.77938,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.25102,7.68065 -48.74777,-30.52798 -67.21871,-34.4541 -18.47094,-3.92612 -62.7855,18.16832 -75.42109,4.13508 -12.63559,-14.03325 13.96995,-55.79555 11.99608,-74.5757 -1.97388,-18.78014 -36.68089,-54.09824 -27.23909,-70.45191 9.44179,-16.353669 57.38167,-3.95556 74.63269,-11.63621 17.25102,-7.680648 40.11546,-51.602873 58.5864,-47.676754 18.47094,3.92612 21.49388,53.350874 34.12947,67.384124 12.63558,14.03324 61.47361,22.20591 63.44748,40.98605 1.97387,18.78015 -44.09773,36.92822 -53.53952,53.28189 z" />
      <path
         d="m 397.92226,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.25101,7.68065 -48.74777,-30.52798 -67.2187,-34.4541 -18.47094,-3.92612 -62.78551,18.16832 -75.4211,4.13508 -12.63558,-14.03325 13.96995,-55.79555 11.99608,-74.5757 -1.97387,-18.78014 -36.68089,-54.09824 -27.23909,-70.45191 9.44179,-16.353669 57.38167,-3.95556 74.63269,-11.63621 17.25102,-7.680648 40.11547,-51.602873 58.58641,-47.676754 18.47093,3.92612 21.49387,53.350874 34.12946,67.384124 12.63559,14.03324 61.47361,22.20591 63.44748,40.98605 1.97387,18.78015 -44.09773,36.92822 -53.53952,53.28189 z"
         id="path198124"
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
      <path
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:16, 8;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
         id="path198126"
         d="m 135.06512,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.251014,7.68065 -48.747765,-30.52798 -67.218704,-34.4541 -18.470939,-3.92612 -62.785503,18.16832 -75.421091,4.13508 -12.635588,-14.03325 13.969949,-55.79555 11.996077,-74.5757 -1.973873,-18.78014 -36.680888,-54.09824 -27.239093,-70.45191 9.441795,-16.353669 57.381673,-3.95556 74.632691,-11.63621 17.251019,-7.680648 40.115467,-51.602873 58.586406,-47.676754 18.470944,3.92612 21.493874,53.350874 34.129464,67.384124 12.63559,14.03324 61.47361,22.20591 63.44748,40.98605 1.97388,18.78015 -44.09773,36.92822 -53.53952,53.28189 z" />
    </g>
  </g>
</svg>

Überprüfen Sie die drei <path ... />Elemente, um die Strich- und Stricheigenschaften anzuzeigen.

  1. Wie kann ich ein abgeflachtes SVG erstellen, das die äußeren Ränder noch animiert?

Ich denke, Sie vermischen hier mehrere Konzepte: Wenn Sie mit "abgeflacht" "keine Ebenen" meinen, müssten Sie alle Objekte in eine Ebene verschieben. Dies ist völlig unabhängig davon, ob bestimmte Formen geschlossene Pfade sind oder nicht. Sie scheinen "Trace Bitmap" ausgeführt zu haben, das Ihnen (abhängig von den Einstellungen / Filtern) mehrere Objekte gibt, die wie verschiedene "Ebenen" erscheinen, aber tatsächlich nur einzelne Objekte sind, die (möglicherweise verrauschte) Formgeometrie enthalten, alle von ihnen in eine einzige Schicht.

Also, um die Dinge klarzustellen:

  • In SVG sind Ebenen eindeutige, überlappende „Leinwände“, deren Sichtbarkeit individuell umgeschaltet werden kann. Um Ebenen in Inkscape anzuzeigen, drücken Sie Shift+Ctrl+L. Für ein einfaches SVG, das Sie im Web verwenden möchten, würde ich nur eine einzige Ebene verwenden und alle Objekte dort einfügen. Höchstwahrscheinlich haben Sie nur eine Ebene namens "Ebene 1". Das ist gut.

  • Wenn Sie "Trace Bitmap" ausführen (z. B. mit "Multiple Scans: Colors"), erhalten Sie eine Gruppe von Objekten. Sie können die Gruppierung mit aufheben Shift+Ctrl+G, dann die einzelnen Objekte trennen (verschieben F1) und inspizieren. Sie enthalten höchstwahrscheinlich die Vektorspuren unterschiedlich gefärbter Formen. Um diese Objekte zu bearbeiten, müssen Sie "Pfade nach Knoten bearbeiten" ( F2) eingeben, dann können Sie zB verrauschte Knoten auswählen (ein Auswahlrechteck ziehen) und löschen ( Ctrl+Del). Wenn Sie das Gefühl haben, dass nur viel Rauschen vorhanden ist oder dass die Objekte eine sehr schlechte Trennung des Originals bieten, können Sie "Trace Bitmap" mit anderen Einstellungen erneut ausführen oder die Vektorformen einfach manuell zeichnen.

  • Sie können alle Objekte, die Pfade sind (wie die Ergebnisse von „Trace Bitmap“) zu einem einzigen Objekt verbinden, indem Sie beide auswählen und „Pfad“ > „Vereinigung“ (oder jede andere boolesche Operation) wählen. Wenn eines der Objekte kein Pfad ist, wandeln Sie es mit „Pfad“ > „Objekt in Pfad“ um. Wenn das nicht funktioniert, haben Sie es möglicherweise mit einer Gruppe von Pfaden zu tun, die Sie zuerst aufheben und dann einzeln konvertieren müssen. Hinweis : Ein Objekt kann nur eine Füll- und eine Strichfarbe haben. Wenn Sie also zwei Objekte verbinden, nehmen sie entweder die Farben des ersten oder des zweiten Objekts an.

  • Egal, ob Sie Ihre Vektorformen durch Nachzeichnen oder manuelles Zeichnen erhalten, am Ende möchten Sie ein paar saubere Objekte mit geschlossenen Pfaden haben. strokeDann können Sie , stroke-width, stroke-dasharrayund zuweisen stroke-dashoffset. Es ist in Ordnung, wenn einige Pfade offen sind, aber beachten Sie, dass die Füllung komisch aussieht, wenn sie von einem Endpunkt der Form zum anderen "schneidet", also sollten Sie die Füllung für diese Pfade entfernen.

Mit einer so aufgeräumten Form sollten Sie in der Lage sein, die gewünschten Eigenschaften leicht zu animieren.

  1. Was ist im Allgemeinen das beste Tool zum Erstellen von SVGs?
  • Haha, es ist unmöglich, eine objektive Antwort auf diese Frage zu geben. Ich habe sowohl Illustrator (vor einiger Zeit) als auch Inkscape (ausschließlich in den letzten paar Jahren) verwendet. Meiner persönlichen Meinung nach ist Inkscape definitiv nicht intuitiv zu erlernen, wenn Sie von Illustrator kommen. Es ist jedoch auch nicht schrecklich kompliziert zu lernen. Sobald Sie es beherrschen, ist es absolut erstaunlich und definitiv das beste Werkzeug zum Erstellen von SVGs. Es wurde um SVG herum aufgebaut, was bedeutet, dass es eine 1:1-Entsprechung zwischen den Inkscape-Tools und den SVG-Funktionen gibt. Und es ist kostenlos und Open Source, was – wenn eine Software ausgereift genug ist, wie Inkscape – bei mir immer Pluspunkte punktet. Aber wie gesagt - persönliche Meinung :D.

Ich hoffe, Ihre Frage(n) damit mehr oder weniger beantwortet zu haben.

Wie füge ich eine Stricheigenschaft hinzu oder animiere den Füllpfad einer SVG-Datei?
AntwortenHierDatenschutz-Bestimmungen1y, 0v