用我們的心進行svg心

情人節在這裡，還有什麼比用手繪製的心更好的方式來表現您的感情呢？ 以前，CSS-Tricks展示了各種令人心動的技巧，啟發了令人愉悅的Codepen提交收藏。 一個例子是Temani Afif的CSS形狀網站，其特徵是僅由CSS創建的時尚心臟。

為了更個人化，讓我們製作一個SVG心臟。無需高級矢量軟件！我們將使用一個簡單的HTML文檔和

>標籤：>

<svg></svg>為了可視化我們的創建，我們將使用屬性。 將其視為由坐標定義的我們的圖紙畫布。我們將設置一個Square Viewbox：

<svg></svg>

現在，讓我們畫畫！我們將利用元素及其viewBox屬性來使用線段來定義心臟的形狀。 關鍵的SVG路徑命令是：Moveto（M，M），Lineto（L，L，L，H，H，H，V，V），CubicBézier曲線（C，C，C，S，S），Q，Q，Q，Q，Q，Q，T，T），Elliptical Arc Curves（A，A，A），和ClotePath（A，A），和ClotsPath（a，a），和Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z，Z）。

為此，我們將重點放在Moveto和Lineto上。 我們首先移動到坐標（2,2）：>

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

接下來，我們繪製一條線到（4,4），然後向（6,2）繪製：> <path></path> d這會產生一個顛倒的三角形。要修復此問題，讓我們刪除默認填充並添加筆觸：>

讓我們增加

以獲得更好的可見性，並使用

<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心的詳細內容。更多資訊請關注PHP中文網其他相關文章！