Handschreibung eines SVG -Herzens mit unseren Herzen

Valentinstag ist hier und wie kann es besser Ihre Zuneigung zeigen als mit einem handgezeichneten Herzen? Zuvor zeigte CSS-Tricks verschiedene Herz-Zerrieching-Techniken und inspirierte eine entzückende Sammlung von Codepen-Einsendungen. Ein Beispiel ist Temani Afifs CSS -Formen -Site mit einem stilvollen Herzen, das ausschließlich mit CSS erstellt wurde.

Für eine persönlichere Note machen wir ein SVG -Herz. Keine fortschrittliche Vektorsoftware benötigt! Wir werden ein einfaches HTML -Dokument und das <svg></svg> Tag:

verwenden

<svg></svg>

Um unsere Erstellung zu visualisieren, werden wir das Attribut viewBox verwenden. Stellen Sie sich dies als unsere Zeichnungs -Leinwand vor, die durch Koordinaten definiert sind. Wir setzen eine quadratische Viewbox:

<svg viewbox="0 0 10 10"></svg>

Nun lass uns zeichnen! Wir werden das <path></path> -Element und sein d -attribut verwenden, um die Form unseres Herzens mithilfe von Liniensegmenten zu definieren. Die wichtigsten SVG -Pfadbefehle sind: MoveTo (M, M), Lineto (L, L, H, H, V, V), kubische Bézier -Kurven (C, C, S, S), quadratische Bézier -Kurven (q, q, t, t), elliptische Arkenkurven (A, A) und Clospepath (Z, Z).

Für dieses Herz konzentrieren wir uns auf Moveto und Lineto. Wir beginnen mit den Koordinaten (2,2):

<svg viewbox="0 0 10 10"><path d="M2,2"></path></svg>

Als nächstes ziehen wir eine Linie zu (4,4), dann zu (6,2):

<svg viewbox="0 0 10 10"><path d="M2,2 L4,4 L6,2"></path></svg>

Dies schafft ein verkehrtes Dreieck. Um dies zu beheben, entfernen wir die Standardfüllung und fügen Sie einen Schlag hinzu:

<svg viewbox="0 0 10 10"><path d="M2,2 L4,4 L6,2" fill="none" stroke="rebeccapurple"></path></svg>

Erhöhen wir die

für eine bessere Sichtbarkeit und fügen Sie rundliche Enden mit stroke-width: stroke-linecap="round" hinzu

<svg viewbox="0 0 10 10"><path d="M2,2 L4,4 L6,2" fill="none" stroke="rebeccapurple" stroke-width="4" stroke-linecap="round"></path></svg>

Und da haben Sie es-ein perfekt unvollkommenes, handgezeichnetes SVG-Herz, das bereit ist, mit jemandem Special geteilt zu werden! ?

Das obige ist der detaillierte Inhalt vonHandschreibung eines SVG -Herzens mit unseren Herzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!