私たちの心を持って、SVGの心を手書きします

バレンタインデーはここにあり、手描きの心よりもあなたの愛情を示すためのより良い方法は何ですか？ 以前は、CSS-Tricksはさまざまな心臓を描く技術を紹介し、Codepenの提出物の楽しいコレクションを刺激しました。 1つの例は、CSSだけで作成されたスタイリッシュなハートを特徴とするTemani AfifのCSS Shapesサイトです。

もっと個人的なタッチについては、SVGの心を作りましょう。高度なベクトルソフトウェアは必要ありません！シンプルなHTMLドキュメントと

タグを使用します。 <svg></svg>

作成を視覚化するには、

<svg></svg>

属性を使用します。 これは、座標で定義された描画キャンバスと考えてください。正方形のビューボックスを設定します：

viewBox

さあ、描きましょう！

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

要素とその

属性を利用して、ラインセグメントを使用して心臓の形状を定義します。 重要なSVGパスコマンドは、Moveto（M、M）、Lineto（L、L、H、H、V、V）、CubicBézierCurves（C、C、S、S）、二次ベジエ曲線（Q、T、T）、楕円形のアーク曲線（A、A）、およびColingepath（Z、Z）です。 この心については、MovetoとLinetoに焦点を当てます。 まず、座標（2,2）に移動することから始めます <path></path> d次に、（4,4）、次に（6,2）にラインを描きます。

これにより、逆さまの三角形が作成されます。これを修正するには、デフォルトの塗りつぶしを削除してストロークを追加しましょう。

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

：

：

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

を使用して、より良い視認性を高め、丸い端を追加しましょう

そして、あなたはそれを持っています - 完全に不完全で、手描きのSVGハート、特別な人と共有する準備ができています！ ？

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

以上が私たちの心を持って、SVGの心を手書きしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。