用我们的心进行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中文网其他相关文章！