Mit drei Werkzeugen, die direkt in SVG integriert sind, können wir Text entlang einer gebogenen Linie fließen lassen: <path>, <text> und <textPath>.
Das Schnipsel
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath alignment-baseline="top" xlink:href="#curve">
Dangerous Curves Ahead
</textPath>
</text>
</svg>Wie wir dahin gekommen sind
Stellen wir uns vor, wir zeichnen eine gebogene Linie in SVG und geben ihr eine ID namens curve.
Siehe den Stift NgwPYB von Geoff Graham (@geoffgraham) auf CodePen.
Dann fügen wir Inhalte in das SVG ein, indem wir das Tag <text> verwenden und ihm eine Breite geben, die mit den viewBox-Dimensionen des SVG übereinstimmt. Wir werden noch nichts sehen, aber wir wissen, dass der Text irgendwo außerhalb des Bildschirms ist.
Siehe den Stift ZyaYOw von Geoff Graham (@geoffgraham) auf CodePen.
Wir wollen diesen Text wirklich sehen. Wir können unseren Text in das Tag <textPath> einpacken und ihn so einstellen, dass er den Linien unseres gebogenen Pfades folgt, indem wir die zuvor festgelegte Pfad-ID aufrufen.
Siehe den Stift Kqywpe von Geoff Graham (@geoffgraham) auf CodePen.
Jetzt geht's zur Sache!
Wir wollen nicht, dass diese Kurve sichtbar ist, also geben wir dem Pfad eine transparente Füllung. Wir könnten das auch in CSS machen, aber der Einfachheit halber wenden wir es hier direkt in der SVG-Markup an.
Siehe den Stift xrPbgx von Geoff Graham (@geoffgraham) auf CodePen.
Der Rest ist CSS! Die genaue Schriftgröße hängt vom Text selbst und der verwendeten Schriftfamilie ab, aber sobald Sie das richtige Gleichgewicht gefunden haben, kümmert sich das SVG selbst um die Reaktionsfähigkeit und stellt sicher, dass alles bei jeder Skalierung auf der Kurve bleibt.
Siehe den Stift SVG-Text entlang eines gebogenen Pfades von Geoff Graham (@geoffgraham) auf CodePen.
Wir könnten diese Methode auf jede Art von gebogenem Pfad anwenden.
Siehe den Stift SVG-Text entlang eines gebogenen Pfades von Geoff Graham (@geoffgraham) auf CodePen.
Nett! Ein Grund, warum ich diese Seite verfolge, ist, dass sie mich über obskure/bahnbrechende Webstandards auf dem Laufenden hält, von denen ich sonst nirgendwo hören würde.
Dasselbe, ehrlich gesagt.
Ich liebe diese Seite seit etwa 5 Jahren, da ich mich immer darauf verlassen kann, dass sie mich richtig führt! Zwei Daumen hoch
Wow, so viel einfacher als in diesem CSS-Tricks-Artikel von 2012: Text auf einem Kreis positionieren. SVG FTW.
Wenn Sie jetzt herausfinden können, wie das in Canvas geht, werden Sie der Held vieler Menschen sein!
Als Alternative zu
fill="transparent"und vielleicht semantisch korrekter können Sie<path/>in<defs></defs>(odersymbol, das auch andere Verwendungen hat) einpacken.Alles darin wird nicht gerendert, kann aber von außerhalb referenziert werden.
Guter Artikel! Aber ich habe eine Frage: Was bedeutet das Attribut „d“ in „path“? Und wie kann ich den Winkel des Kreises ändern?
Vielen Dank
Hallo!
ddefiniert die Art und Weise, wie der SVG-Pfad gezeichnet wird, indem Punkte entlang des Pfades angegeben werden.https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
Sie könnten versuchen, die Krümmung direkt im SVG-Code zu ändern (einige Leute sind darin wirklich gut!), aber es ist ehrlich gesagt viel einfacher, den Pfad in einer Anwendung wie Illustrator oder Sketch zu zeichnen, ihn als SVG zu exportieren und dann den Code von dort zu holen.
Sie müssen den Winkel des Kreises nicht ändern. Sie müssen einfach einen anderen Pfad erstellen! :-D
Das ist großartig! Danke dafür! Was ist, wenn ich Regenbogentext haben möchte? Ich habe dies verwendet
aber ich kann es nur in ein Spanelement legen, um den gewünschten Regenbogen-Look zu erzielen. Ich möchte wirklich nicht jeden Buchstaben einzeln machen müssen. Ich mag den Farbverlauf... HILFE bitte! :-)
Update: Ich habe eine Umgehung gefunden, aber ich möchte trotzdem die Antwort auf diese Frage wissen, da ich sie sehr interessant finde!
Hier ist eine kleine Animation. Ich wollte schon immer lernen, wie man Text auf einem Pfad in CSS animiert! https://codepen.io/thoughtassassin/pen/aRBJWM
Kann mir jemand erklären, was d=”M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97″ bedeutet
Hallo Leo! Diese steuern die Form des Pfades, der in diesem Fall die Kurve ist. SVG ist am Ende des Tages Code, und das ist der Code für diesen speziellen Pfad.
Wenn Sie sich fragen, wie Sie das schreiben würden, dann machen Sie sich keine Sorgen, denn die meisten von uns wissen das nicht. Wir bekommen diese aus dem Illustrationsprogramm, in dem wir arbeiten, sei es Illustrator, Sketch oder eine andere App, wenn das SVG exportiert wird.
Schön. Wie kann man den Text zentrieren auf dem textPath? text-anchor: middle funktioniert nicht, da er immer noch linksbündig auf dem Pfad ausgerichtet ist und die linke Hälfte versteckt ist.
Ich habe herausgefunden, dass dies durch Hinzufügen des Attributs startOffset="50%" zum textPath-Element und dem oben genannten CSS text-anchor: middle zum text-Element geschieht.
Das kann man jetzt mit amCharts machen: https://codepen.io/team/amcharts/pen/MLEKVK
Sehr gut gemacht!
Ich suche nach einer Möglichkeit, eine Reihe von Bildern in kreisförmigen Rahmen mit Bildunterschriften um den Rahmen herum anzuzeigen.
Ist das Einbetten von SVG-Code für jede Bildunterschrift eine praktikable Methode, oder suche ich Ärger?
Gute Frage! Ich denke, das ist eine völlig in Ordnung. Tatsächlich, wenn Sie sich das Kommentarformular dieser Seite ansehen, werden Sie etwas Ähnliches mit dem Code-of-Conduct-Element sehen. :)
Wie macht man den Pfad unsichtbar?
Schauen Sie sich das vierte Beispiel im Abschnitt „Wie wir dahin gekommen sind“ an. Eine transparente Füllung wurde hinzugefügt, um das Standard-Schwarz zu entfernen. :)
Schöner Trick!
Nachdem ich dieses Tutorial gefunden hatte, habe ich heute ein bisschen mit SVG-Animationen herumgespielt.
Beispielcode, wie sich Text entlang eines gebogenen Pfades bewegt
Beweglicher Text ist interaktiv
Hallo, ich hoffe, Ihnen geht es gut. Ich muss eine Frage stellen; Ich habe eine Online-Design-Website, auf der es viele Produktvorlagen gibt. Das Problem ist, wenn ein rundes Design mit SVG eingegeben wird, sind die Positionen der gebogenen Texte verzerrt. Warum ist das so? Es wäre toll, wenn Sie mir helfen könnten. Vielen Dank im Voraus.
Können wir gebogene Wörter auch auf Urdu oder Arabisch hinzufügen? Wenn ja, wie?
Hier ist der Code.
Entschuldigung, falls dies eine doppelte Nachricht ist, aber ich glaube nicht, dass meine erste Nachricht den von mir eingefügten Code enthielt. Wenn ich eine Vorschau sehe, verschwindet er (seufz). Ich arbeite mit einem Theme und es gibt ein Stück Code, das ich nicht verstehe. Ich hoffe, Sie können mir helfen, weil ich es selbst nicht herausfinden konnte. Ich sende es, obwohl es auf meinem Bildschirm verschwindet. Vielleicht können Sie es trotzdem sehen – ich hoffe.
Vielen Dank im Voraus,
Rosemary
Wie kann man den Text über den gesamten Pfad dehnen, ohne den Buchstabenabstand manuell zu ändern? Das funktioniert nicht gut für Responsive, wenn man möchte, dass er sich immer bis zum Ende dehnt.
Hallo, danke dafür! Ich frage mich, wie man die Farbe des textPath ändert??
Tolle Erklärungen! Danke. Ich habe eine schnelle Frage: Ich versuche, text-anchor auf einem Pfad zu verwenden, aber wenn ich "middle" verwende, verschwindet die Hälfte des Textes. Wenn ich "start" verwende, sehe ich den gesamten Text. Was mache ich falsch?
Hallo Alberto! Wenn
text-anchorauf "middle" gesetzt ist, bezieht sich das auf die aktuelle Position des<text>-Elements, die durch das Attributxfestgelegt wird. Wenn wir sagen, wir wollen an der Mitte verankern, meinen wir, dass wir die Mitte des Textelements am Wert des Attributsxausrichten wollen. Das ist so, als würde man das Textelement nach links schieben, bis die mittlere Ankerposition erreicht ist, weshalb es abgeschnitten wird. Setzen Sie es auf "start", und der Anker befindet sich am linken Rand des Textelements, wodurch das Ganze sichtbar wird.Stellen Sie sich vor, Sie heften ein Stück Papier an eine Pinnwand. Stellen wir uns vor, wir zeichnen eine Markierung auf das Brett, die angibt, wo wir ein Blatt Papier anheften wollen. Wenn wir den Stift in die Mitte des Papiers stecken und es an der Markierung auf dem Brett befestigen, wird das Papier auf eine bestimmte Weise positioniert. Wenn wir den Stift zum „Start“ des Papiers verschieben und das Papier erneut an das Brett heften, wird es anders positioniert.
Hey Geoff, das ist genial, danke! Entschuldigen Sie, wenn das schon gefragt wurde – ich habe mich gefragt, wie man den Text entlang dieses Pfades animieren könnte? Ich möchte, dass die Kurve statisch ist, aber der Text daran entlang „kriecht“. Haben Sie Tipps für den Anfang? Danke nochmals!
Hallo, das ist großartig!
Wie stelle ich den Pfad so ein, dass die Textkurve invertiert ist, wie eine Bootsform, sodass der Halbkreis umgekehrt ist?
Hallo Anastasia! Sie müssten die Punkte im Pfad ändern, damit sie sich in die andere Richtung krümmen. Ich bin ziemlich schlecht darin, solche Dinge direkt im Code zu machen, daher würde ich diesen SVG-Code nehmen, ihn in etwas wie Sketch oder Figma einfügen, die Kurve bearbeiten und dann den neuen Code exportieren.
Also, vielleicht so stattdessen?
Tolles Tutorial! Kannst du auch ein Tutorial machen, wie man Text in Herzform oder Spiraltext wie in diesem Beispiel erstellt
https://www.mockofun.com/tutorials/curved-text-generator/
Was ist der Text, den du in der gebogenen fetten Schrift verwendet hast?
Er heißt Luckiest Guy – Sie können ihn direkt bei Google Fonts herunterladen.
Die Verwendung von zwei
textPath-Elementen führt zu ÜberlappungenWas wäre der Code, um eines davon zu versetzen?
Wie kann ich die Farbe jedes Buchstabens ändern?
Ich würde sagen, wie bei jedem anderen Text. Chris erklärt ein paar Ansätze in diesem Artikel.
Heyyy, ich versuche das zum Laufen zu bringen, aber mein Text verknüpft sich nicht mit dem Pfad.
Wären Sie so freundlich und sagen mir, was ich falsch mache?
Ich habe alles hier eingefügt: https://atelier.wild-core.net/emerge/ (Mitte der Seite)
Der Pfad erscheint, der Text auch ... aber sie sind nicht verknüpft.
Vielen Dank für jede Hilfe.
Mit freundlichen Grüßen aus Frankreich.
Schöner Artikel. Vor einiger Zeit habe ich text-to-svg.com erstellt – ein Tool zur Umwandlung von Text in SVG-Pfad, vielleicht ist es für jemanden nützlich.