Écriture manuscrite un coeur SVG, avec nos cœurs

La Saint-Valentin est là, et quelle meilleure façon de montrer votre affection qu'avec un cœur dessiné à la main? Auparavant, CSS-Tricks a présenté diverses techniques de dessin cardiaque, inspirant une délicieuse collection de soumissions de codepen. Un exemple est le site CSS Shapes de Temani Afif, avec un cœur élégant créé uniquement avec CSS.

Pour une touche plus personnelle, fabriquons un cœur SVG. Aucun logiciel vectoriel avancé nécessaire! Nous utiliserons un document HTML simple et la balise <svg></svg>:

<svg></svg>

Pour visualiser notre création, nous utiliserons l'attribut viewBox. Considérez cela comme notre toile de dessin, définie par les coordonnées. Nous allons définir une Viewbox carrée:

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

Maintenant, dessinez! Nous utiliserons l'élément <path></path> et son attribut d pour définir la forme de notre cœur à l'aide de segments de ligne. Les commandes clés du chemin SVG sont: MoveTo (M, M), LineTo (L, L, H, H, V, V), Cumbic Bézier Curves (C, C, S, S), Quadratic Bézier Curves (Q, Q, T, T), Elliptical Arc Curves (A, A) et ClosePath (z, z).

>

Pour ce cœur, nous nous concentrerons sur MoveTo et Lineto. Nous commençons par passer aux coordonnées (2,2):

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

Ensuite, nous tracerons une ligne vers (4,4), puis à (6,2):

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

Cela crée un triangle à l'envers. Pour résoudre ce problème, supprimons le remplissage par défaut et ajoutons une course:

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

Augmenter le stroke-width pour une meilleure visibilité et ajoutant des extrémités arrondies en utilisant stroke-linecap="round":

<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>

Et là, vous l'avez - un cœur SVG parfaitement imparfait et dessiné à la main, prêt à être partagé avec quelqu'un de spécial! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!